如何获得 React 状态以仅更改 .map 中返回的一项？

Question

似乎我在下面编写代码的方式是，当 setLoading==true 时，它​​会将我的所有按钮更改为加载状态 (true)，而我只希望更改被单击的按钮。为了进一步解释，我只是在加载==true 时在按钮上显示一个微调器。关于如何让它正常运行的任何想法？我认为这是一个关键问题，但事实并非如此，因为我对返回的每个元素都有一个唯一的键。

非常感谢大家！

        //Function called to set the state 
        const [loading, setLoading] = useState(false);

        exampleArray.map((exampleObject, index) => {
          return(
            <div className={resulStyle.result} key={exampleObject.hash}>
                <button key={exampleObject} onClick = {() => {router.push(`/queryFamily/${exampleObject.hash}`); setLoading(true);}}>{loading ? 
                <div className="spinner-box">
                <div className="pulse-container small">  
                  <div className="pulse-bubble pulse-bubble-1"></div>
                  <div className="pulse-bubble pulse-bubble-2"></div>
                  <div className="pulse-bubble pulse-bubble-3"></div>
                </div>
              </div>
                : "View Pricing"}</button>
              </div>
            </div>
          )
        })

Answer 1

捕获作为 currentButtonLoading（或其他）单击的按钮的 id/唯一标识符：映射时，查看该唯一标识符是否 === currentButtonLoading，然后使用您的加载状态仅影响该单个按钮。

Answer 2

由于加载是在状态级别设置的变量，它将用于您呈现的所有按钮。 为什么不使用另一个状态变量

const [currentButtonIndex, setCurrentButtonIndex] = useState();

然后点击设置 setCurrentButtonIndex(index)

在条件下使用 index===currentButtonIndex && 加载

Answer 3

嗯，是的，你应该期望会是这样。在这里，您有一个组件，并且您将字符串值作为状态。如果你将此状态更改为true，React 会以加载状态渲染所有按钮。

解决方案是为您的按钮创建一个组件并将状态保留在那里并在此处使用该组件。

该按钮组件的示例如下所示：

function MyButton() {
  const [loading, setLoading] = useState(false);

  return loading ? <Spinner /> : <button onClick={() => {your_thing; setLoading(true);}}>Something!</button>
}