反应 setState 不更新数组答案

【问题标题】：React setState not updating array反应 setState 不更新数组
【发布时间】：2018-01-09 02:07:49
【问题描述】：

我遇到了 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>
    );
  }
}

【问题讨论】：

“当我刷新时”是什么意思。就像从字面上刷新浏览器一样？
我的意思是它总是恢复到数组的原始状态。新项目从未真正添加到数组中。
我不明白您所说的“还原”是什么意思。你的意思是添加了item，但是刷新页面后又回到了原来的状态？
@TYPOI 在addTodoItem 上，您正在异步更新您的状态，而在handleChange 上，状态正在同步更新。我不确定，但可能存在某种竞争条件......我会尝试以异步方式进行所有状态更新，将函数作为 setState 的参数传递。
是的，没错

标签： javascript arrays reactjs state

【解决方案1】：

React“状态”不会做你认为它做的事情。它不是像数据库或localStorage 这样的持久数据源。状态中的项目，就像 JavaScript 中的任何其他变量一样，仅在单个加载的生命周期内存在。刷新网页的那一刻，每个变量都会被擦除并重新初始化，就好像它是您第一次登陆页面一样。

如果你想保持状态，你需要使用在刷新、会话等中保持不变的东西。

如果您没有服务器，或者不需要服务器，您可以使用localStorage 或其他浏览器存储系统，但是这些不利于长期持久性。在某些时候，根据您要构建的内容，您将需要使用连接到数据库的服务器。

【讨论】：

好的，灯泡时刻。大声笑谢谢@azium