javascript - 为什么ES6中的map函数不刷新？

Question

我想创建一个待办事项列表，它以 allTask​​s 状态存储任务，并在我手动推送一些数据时工作，但当我添加带有输入的项目时不会在 map 功能中显示。

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

您正在改变原始状态。不要改变状态，并使用 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.allTask​​s]; 创建一个新数组，然后我们将一个值推送到 k。所以在这种情况下我们不会直接改变状态。相反，我们正在更改新创建的数组。之后，我们使用 setState 来设置将更新 ui 的 state。