[英]React setState not updating array
我在setState不更新我的todoItems数组时遇到问题。 我在这里阅读了处理同一问题的其他帖子。 在我的addTodoItem()中,我将此this.setState更改为一个函数,并且现在使用了散布运算符,该数组中正在生成一个新项。 这是记录的内容:
(4) [{…}, {…}, {…}, {…}]0: {id: "1", item: "Learn React."}1: {id:
"2", item: "Do Yoga."}2: {id: "3", item: "Be kind."}3: {id: "4",
item: "Have Fun"}length: 4__proto__: Array(0)
App.js:36 todo: Have Fun
但是它实际上并没有更新数组。 当我刷新时,它会恢复为原始状态。 从我阅读的内容来看,我认为我有状态更新异步问题。 我想念什么?
class App extends Component {
constructor(props) {
super(props);
this.state = {
value: '',
listItemValue: props.value || '',
todoItems: [
{id: _.uniqueId(), item: 'Learn React.'},
{id: _.uniqueId(), item: 'Do Yoga.'},
{id: _.uniqueId(), item: 'Be kind.'}
]
};
this.addTodoItem = this.addTodoItem.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
let value = event.target.value;
this.setState({
value: this.state.value,
listItemValue: value
});
}
handleSubmit(event) {
event.preventDefault();
this.setState({
value: '',
listItemValue: ''
});
}
addTodoItem = () => {
let todoItems = this.state.todoItems.slice();
todoItems.push({
id: _.uniqueId(),
item: this.state.listItemValue
});
this.setState(prevState => ({
todoItems: [
...prevState.todoItems,
{
id: _.uniqueId(),
item: this.state.listItemValue
}
]
}))
};
render() {
return (
<div className="App">
<h1>Todo List</h1>
<TodoListForm name="todo"
onClick={()=>this.addTodoItem()}
onSubmit={ this.handleSubmit }
handleChange={ this.handleChange }
value={ this.state.listItemValue } />
<TodoList todoItems={ this.state.todoItems }/>
</div>
);
}
}
反应“状态”并没有按照您的想法做。 它不是像数据库或localStorage
这样的持久数据源。 与JavaScript中的其他任何变量一样,处于状态的项目仅在单次加载的生存期内存在。 刷新网页时,所有变量都会被擦除并重新初始化,就好像这是您第一次进入该页面一样。
如果要保持状态,则需要使用在刷新,会话等过程中保持状态的东西。
如果您没有服务器,或者不需要服务器,则可以使用localStorage或其他浏览器存储系统,但是这些服务器不能长期保持持久性。 在某些时候,根据您要构建的内容,您将需要使用连接到数据库的服务器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.