在react中使用setState钩子改变嵌套对象的值

Question

需要改变isClicked点击像切换到!isClicked。它为按钮点击呈现JSX样式。

我的数据:

const [isApply, setIsApply] = useState([
{
"0": {
"isClicked": false,
"isExpand": false,
"uni": "NSBM"
}
},
{
"1": {
"isClicked": false,
"isExpand": false,
"uni": "NSBM"
}
},
{
"2": {
"isClicked": false,
"isExpand": false,
"uni": "SLIIT"
}
},
{
"3": {
"isClicked": false,
"isExpand": false,
"uni": "SLIIT ACADEMY"
}
},
{
"4": {
"isClicked": false,
"isExpand": false,
"uni": "NIBM"
}
},
{
"5": {
"isClicked": false,
"isExpand": false,
"uni": "NIBM"
}
}
])

const apply = (e) => {
console.log("clicked button id: ", e.currentTarget.id);
console.log(isApply);
setIsApply(...)
};

需要更改isClicked on click like a toggle(!isClicked)。它为按钮点击呈现jsx样式。因为它是一个嵌套对象对象键是由按钮点击ID生成的这使得设置isClicked的状态变得更加困难需要帮助

Answer 1

我认为你在传播对象时做错了什么。你必须考虑对象扩散

当对象展开时，展开操作符的位置可能会影响您正在执行的操作。

✗错

{ isClicked: !state[key]?.isClicked, ...state[key] }

在这里，即使你正在更新isClicked值，它也不会对对象产生影响，因为因为你在更新isClicked值后添加了...state[key]。它用自己替换原来的对象。

✔正确

{ ...state[key], isClicked: !state[key]?.isClicked }

在这里你通过添加...state[key]然后更新特定对象的isClicked值来放置当前状态。

下面是使用React的工作示例。