如何在 react.js 状态下改变数组内的对象？答案

【问题标题】：How to mutate an object inside array in react.js state?如何在 react.js 状态下改变数组内的对象？
【发布时间】：2021-06-03 08:42:47
【问题描述】：

我在尝试更新状态时遇到问题。这是我的代码：

const [todos, setTodos]= useState([])

useEffect(() => {
  setTodos([
{id:1, title: '', 
notes: [{id: 1, description: 'this is a simple description'}]}
])
}, [])

我的目标是在待办事项数组中添加一个注释。我试试这样

const i = todos.findIndex((t) => t.id === parseInt(id));
const newArr = todos[i].notes[0].push(note);
setTasks(newArr);

但它不起作用 newArr 为我提供了新状态的索引说明。请帮忙提前致谢

【问题讨论】：

标签： reactjs react-hooks react-component react-state

【解决方案1】：

如果您想让它工作，您可以执行以下操作：

const newArr = todos[i].notes.push(note)

但这不是推荐的方式。

向笔记数组中添加新项目的最佳方法是使用object.assign 或扩展运算符，以免直接改变整个数组。如下所示：

const newArr = [...todos[i], note]

并且也使用这种方式来改变你的整个任务数组。

如果您想了解有关为什么应该使用扩展运算符而不是推送的更多信息，我认为 ar here 已经很好地描述了。

【讨论】：

但是如果你注意到笔记也是一个数组，所以我认为它需要括号？ todos[i].notes[0]
我认为没有，因为通过使用这种方式 [...todos[i], note] 并将其分配给 setTasks 它将用旧值替换整个笔记数组

【解决方案2】：

我创建了this，它运行良好。你需要做的是获取 todo id 并推送到它的注释。这里todo 状态被更新但渲染方法没有被调用。为了调用render 方法，我再次调用了setTodo。

【讨论】：

你为什么这样做？ setTodo((prevTodo) => [...prevTodo]) ??你没有使用_todo
是的，我不必使用_todo，因为push 方法已经改变了_todo。这意味着todo 状态的值已更新，但未反映在render 中。推送笔记后可以使用logtodo，会发现新的笔记已经添加了。只是为了渲染todo，我调用了setTodo，其先前的值已更新。
但是推送函数返回索引而不是对象
这里和push方法的返回值无关。通过使用推送方法 _todo 对象的笔记已更新，即新笔记已更新。