React JS setState for an array

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>
})