为什么ES6中的地图功能没有刷新？

Question

我想创建一个待办事项列表,它将任务存储在allTasks状态中,当我手动推送一些数据但是当我添加带有输入的项目时,我没有在地图功能中显示任务.

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
            allTasks: []
        }

    this.addToList = this.addToList.bind(this);
    }

    addToList() {
        this.state.allTasks.push(this.state.inputValue);
    }

    render() {
        return (
          <div>
              <h1>??? ??? ??? ?? ?????? ???? !</h1>
              <input type="text" placeholder="??? ??? ?? ??????? ..." onChange={ event => this.setState({ inputValue: event.target.value }) } />
              <button onClick={ this.addToList }>??? ????</button>
              <hr />
              <ul>
              {
                  this.state.allTasks.map(task => {
                      return <li>{ task }</li>;
                  })
              }
              </ul>
          </div>
        );
    }
}

Answer 1

你正在改变原作state.不要改变状态,并用来setState重新渲染ui.

addToList() {
   let k = [...this.state.allTasks];
   k.push(this.state.inputValue);
   this.setState({allTasks: k})
}

or
addToList() {
   this.setState({allTasks: [...this.state.allTasks, this.state.inputValue]})
}

直接改变状态不会让ui重新回归.你应该避免直接改变状态.也setState用来更新状态将重新呈现ui.

let k = [...this.state.allTasks];创建一个新数组,然后我们将值推送到k.所以在这种情况下,我们不会直接改变状态.相反,我们正在改变一个新创建的数组.之后我们setState用来设置state哪个会更新ui.