Javascript 修复用于呈现Mui的条件状态行为<；卡片>；

我有一张梅卡的清单。在卡悬停时，我希望在卡内显示一个浮动操作按钮。我使用状态来实现这一点，问题是在状态更改期间，悬停状态应用于所有卡，这意味着按钮显示在每张卡上，而不是被指向/悬停的卡上。我怎样才能控制它，使按钮只显示在启动状态操作的卡上

另外，是否存在不导致状态更改以重新渲染其他组件的情况？我有一个

，它在悬停状态下被重新渲染，不断重复动画

基本上这就是我正在做的：

    const [state, setState] = useState({
        actionButton: false
    });

我的名片：

                        <Card
                          className="miniGraphCards"
                          onMouseOver={() => setState({ actionButton: true })}
                          onMouseOut={() => setState({ actionButton: false })}
                        >

setState（{actionButton:true}）
onMouseOut={（）=>setState（{actionButton:false}）
>

基于关闭状态和悬停的条件渲染：

                            {state && state.actionButton != false &&
                              <Fab>
                                <EmojiEmotionsIcon />
                              </Fab>}

{state&&state.actionButton！=false&&
}

请参阅可复制代码：您将注意到图形的重复重新渲染以及按钮应用于悬停的所有卡

---

您正在

应用程序组件上保存“状态”。您的布尔操作按钮将触发所有项目

由于您希望<代码> app >代码>知道什么项目是活动的/悬停，请考虑保存< <代码> >卡>代码> <强> > > />强，这样您就可以确定“代码>卡正在运行。
由于我仍然知道应用程序是如何从您的中运行的，因此我建议您为您悬停的
卡保存
数据.symbol

首先，悬停，记住当前的
data.symbol

<Card
    onMouseOver={() => setState({ actionButton: data.symbol })}
    onMouseOut={() => setState({ actionButton: null })}
>

setState（{actionButton:data.symbol}）
onMouseOut={（）=>setState（{actionButton:null}）
>

在循环所有卡时，您可以检查当前卡是否需要这样的图标：

{state && state.actionButton === data.symbol && (
    <Fab>
        <EmojiEmotionsIcon />
    </Fab>
)}

{state&&state.actionButton===data.symbol&&(
)}

谢谢您的帮助，我是否可以通过hover阻止我的图形组件由于状态更改而重新渲染？是的，您应该在
应用程序
和每张
卡
之间添加一个组件，以便每张
卡
都可以保持自己的状态。这将阻止任何重新渲染。当您说“在
应用程序
和每张
卡
之间添加一个组件”时，您指的是什么？仅使用注释很难解释；）开始阅读这样的问题：或者我理解，谢谢您的链接！