为数组反应 JS setState

Question

我有一个数据，每个数据都有一个状态，我把它放在 React Hooks 数组状态上。 这是我从服务器请求数据后的当前状态

console.log("panduan : ", panduan)

// Output
panduan :
[6] -> [false, false, false, false, false, false]

所以这些布尔值中的每一个都应该是下面这个组件的触发按钮。

我有一个组件，每个数据都应该设置自己的状态，这是我的组件。

data.map((post, index) => {
  <TriggerButton onClick={() => setPanduan([!panduan[index]])}>
    {post.year}
  </TriggerButton>
})

// this Child component should be shown when state is true
const content = (
  <Triggered show={panduan[index]}>
    {post.someData}
  </Triggered>
)

上面的这段代码仍然不起作用，也许是因为我没有以正确的方式使用setPanduan 。 因此，如何setPanduan每个数据？

Answer 1

我想你可能在你的父 onClick 方法中寻找更像这样的东西

onClick={() => { 
  const tempArray = [...panduan];
  tempArray[index] = !tempArray[index];
  setPanduan(tempArray);
}

因为您目前拥有的最终会将整个状态更改为单个项目数组并从服务器中删除在那里初始化的数据:)

Answer 2

您没有正确设置更新的数组。 确保解构/克隆旧数组并仅切换预期索引，如下所示：

data.map((post, index) => {
   <TriggerButton onClick={() => {
      // clone old state
      const newArray = [...panduan];
      // update toggled index
      newArray[index] = !newArray[index]
      setPanduan(newArray)
    }>
      {post.year}
   </TriggerButton>
})