为数组反应 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

我认为您可能在您的 Parent onClick 方法中寻找更像这样的东西

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

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

Answer 2

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

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

为数组反应 JS setState

React JS setState for an array

javascript

facebook

reactjs