使用useState

Question

我正在尝试渲染一个元素数组，以便当您将鼠标悬停在某个元素上时，它会过滤元素数组并仅使用悬停的元素重新渲染。保持位置是越野车，但现在不必担心。

它可以工作，但是当悬停元素被渲染时，它没有任何内容

const [show, setShow] = useState(false);

const cards = [{key:"1",title:"elem1",content:"..."},{key:"2",title:"elem2",content:"..."},{key:"3",title:"elem3",content:"..."}]

const tempCards = []

My hover function returns

tempCards = [{key:"1",title:"elem1"}];

/// temp function allowing to work from button click
const changeShow = () => {
    tempCards = cards.filter(item => item === cards[0]);
    console.log(tempCards[0])
    setShow(!show)
  }

一切正常，但是当元素加载到页面上时，没有内容显示

    {show ? cards.map((item)=> {
      return <CardSpinLeft
         onClick={toggle}
         key={item.key}
         id={item.key}
         image={item.img}
         name={item.title}
         title={item.title}
         paragraph={item.content}
         />
         }): 
         <CardSpinLeft
         onClick={toggle}
         key={tempCards.key}
         id={tempCards.key}
         image={tempCards.img}
         name={tempCards.title}
         title={tempCards.title}
         paragraph={tempCards.content}
         />
      }

没有收到任何错误，我什至尝试使过滤器功能异步/等待，以为它是加载问题。我唯一能想到的是，react是在内容出现之前就对其进行了预加载？