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

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

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

2 个答案: