反應setState不更新數組

Question

我在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>
    );
  }
}

Answer 1

反應“狀態”並沒有按照您的想法做。 它不是像數據庫或localStorage這樣的持久數據源。 與JavaScript中的其他任何變量一樣，處於狀態的項目僅在單次加載的生存期內存在。 刷新網頁時，所有變量都會被擦除並重新初始化，就好像這是您第一次進入該頁面一樣。

如果要保持狀態，則需要使用在刷新，會話等過程中保持狀態的東西。

如果您沒有服務器，或者不需要服務器，則可以使用localStorage或其他瀏覽器存儲系統，但是這些服務器不能長期保持持久性。 在某些時候，根據您要構建的內容，您將需要使用連接到數據庫的服務器。