unshift会改变状态吗？如何判断状态是否发生了变化(从工具中)？
unshift会改变状态吗？如何判断状态是否发生了变化(从工具中)？
提问于 2019-06-04 02:40:26
我对native和react仍然是个新手，所以我在一个todo应用程序中使用了这个tutorial，并阅读了以下文章：
- https://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/
- https://daveceddia.com/why-not-modify-react-state-directly/
addNewTodo方法使用unshift，如果我没记错的话，它会改变数组/状态？
有没有更有效的方法在add方法上使用spread来编写？或者，如果我完全错了，那么有什么好方法可以使用react工具来确定状态是否发生了变化(例如，用于维护其他ppl代码)？
export default class App extends React.Component {
constructor(){
super();
this.state = {
todoInput: '',
todos: [
{id: 0, title: 'Insult Jerry', done: false},
{id: 1, title: 'Build something', done: false},
{id: 2, title: 'Morty Mind Blowers', done: false}
]
}
}
addNewTodo () {
let todos = this.state.todos;
todos.unshift({
id: todos.length + 1,
title: this.state.todoInput,
done: false
});
this.setState({
todos,
todoInput: ''
});
}
toggleDone (item) {
let todos = this.state.todos;
todos = todos.map((todo) => {
if (todo.id == item.id) {
todo.done = !todo.done;
}
return todo;
})
this.setState({todos});
}
removeTodo (item) {
let todos = this.state.todos;
todos = todos.filter((todo) => todo.id !== item.id);
this.setState({todos});
}
...回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-04 02:54:08
您可以使用扩展运算符，而不是unshift，如下所示：
this.setState({
todos: [
{
id: this.state.todos.length + 1,
title: this.state.todoInput,
done: false
},
...this.state.todos
]
});我不知道有什么工具可以让你判断状态是否发生了变化。但是，如果您准备使用TypeScript，您可以将状态声明为readonly，以防止这种类型的突变。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56432864
复制相关文章
相似问题