如何让React中map返回的列表仅单个被点击项响应state变更？

你当前仅声明了一个全局布尔类型的loading状态，所有通过map渲染的按钮都共同依赖该状态判断是否展示加载动画，因此只要状态被设为true，所有按钮会同步进入加载状态，该问题和key属性配置无关。

• 调整loading状态的存储格式，不再存布尔值，改为存储当前正在加载的项的唯一标识，这里直接复用你已有的exampleObject.hash即可，该值本身是唯一值
• 点击按钮时仅将当前点击项的hash存入loading状态
• 渲染按钮时，仅当当前遍历项的hash等于loading状态存储的hash时，才展示加载动画

修改后的完整代码如下：

// 调整state存储类型，初始值为null代表没有处于加载状态的项
const [loadingHash, setLoadingHash] = useState(null);

exampleArray.map((exampleObject) => {
  return(
    <div className={resulStyle.result} key={exampleObject.hash}>
        <button 
          onClick={() => {
            router.push(`/queryFamily/${exampleObject.hash}`);
            // 点击时仅把当前项的hash存入加载状态
            setLoadingHash(exampleObject.hash);
          }}
        >
          {/* 仅当前项的hash和存储的加载hash一致时，才展示加载动画 */}
          {loadingHash === exampleObject.hash ? 
            <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>
  )
})

如果后续需要重置加载状态，比如路由跳转完成、对应业务逻辑执行结束后，调用setLoadingHash(null)即可恢复所有按钮的默认展示。另外你原代码多写了一个多余的</div>闭合标签，上述代码已经做了修正。

内容的提问来源于stack exchange，提问作者TFT0764