[英]SetState of an Objects of array in React
So i've been working on this for awhile what i'm trying to do is change a checked value on checkbox click.所以我已经研究了一段时间,我想要做的是在单击复选框时更改选中的值。
My initial state looks like this:我的初始状态如下所示:
const [todoList, setTodoList] = useState({
foundation: {
steps: [
{ key: "1", title: "setup virtual office", isDone: false },
{ key: "2", title: "set mission and vision", isDone: false },
{ key: "3", title: "select business name", isDone: false },
{ key: "4", title: "buy domain", isDone: false },
],
},
discovery: {
steps: [
{ key: "1", title: "create roadmap", isDone: false },
{ key: "2", title: "competitor analysis", isDone: false },
],
}
});
and my map and onClick function (updateCheckFoundation works when click the checkbox)以及我的地图和 onClick 函数(单击复选框时 updateCheckFoundation 起作用)
{todoList.foundation.steps.map((item) => {
return (
<div>
<input type="checkbox" defaultChecked={item.isDone}
onClick={(event)=> updateCheckFoundation({
isDone:event.target.checked,
key:item.key
})}/>
<span>{item.title}</span>
</div>
);
})}
so how can ı update todoList use setState?那么如何使用 setState 更新 todoList 呢?
my code (updateCheckFoundation func.) like this and is not working :( :我的代码(updateCheckFoundation func。)像这样并且不起作用:(:
const updateCheckFoundation = ({isDone, key}) => {
const updateTodoList = todoList.foundation.steps.map((todo)=> {
if(todo.key === key){
return {
...todo,
isDone
};
}
return todo;
});
setTodoList(updateTodoList);
}
Your updateCheckFoundation
callback isn't maintaining the state invariant, and is in fact, dropping all but the foundation.steps
array of state.您的
updateCheckFoundation
回调并没有保持状态不变,事实上,除了foundation.steps
数组之外的所有状态都被删除了。
const updateCheckFoundation = ({isDone, key}) => {
const updateTodoList = todoList.foundation.steps.map((todo)=> {
if(todo.key === key){
return {
...todo,
isDone
};
}
return todo;
});
setTodoList(updateTodoList); // <-- only the state.foundation.steps array!!
}
In function components, when using the useState
state updater functions you need to handle merging state ( the root state ), and nested state, yourself, manually.在函数组件中,当使用
useState
状态更新器函数时,您需要手动处理合并状态(根状态)和嵌套状态。
const updateCheckFoundation = ({ isDone, key }) => {
setTodoList(state => ({
...state, // <-- shallow copy state object
foundation: {
...state.foundation, // <-- shallow copy
steps: state.foundation.steps.map(todo => todo.key === key
? { ...todo, isDone }
: todo)
},
}));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.