这个问题已经在这里有一个答案:
因此,我创建阵营的Todo应用程序有一个对象作为待办事项列表。删除与删除键工作的项目,但让我回到布尔而不是对象与项目的其余部分。
deleteTodo = (id) => {
const { todos } = this.state;
this.setState({
todos: delete todos[id],
});
我得到这个控制台:
Warning: Failed prop type: Invalid prop `todos` of type `boolean` supplied to `TodoList`, expected an object.
使用终极版时,应使用一成不变的操作。你不应该直接更改你的状态。
对于这一点,你可以用解构从待办事项排除待办事项,如果你的待办事项是一个对象:
const { todos } = this.state;
const { [id]: _, ...newTodos } = todos;
this.setState({
todos: newTodos
});
如果待办事项是一个列表,因为你不能从一个数组解构通过索引项,使用slice
方法,该方法不修改数组,而是返回一个修改后的副本:
const { todos } = this.state;
this.setState({
todos: [...todos.slice(0, id), ...todos.slice(id + 1)];
});
您可以使用comma operator,在那里你先删除id
,然后返回结果。
见下面例子:
const todos = {
id: 1,
msg: "Pet doggo"
},
newToDo = {newToDo: (delete todos['id'], todos)};
console.log(newToDo);
你有你的状态,首先复制到一个数组,所以你拥有它的克隆。
然后,你从你的新的数组中删除不需要的ID。
var newTodoArray = this.state;
newTodoArray.remove(id);
this.setState({
todos: newTodoArray,
});
像上面。