Reactjs 待办事项列表 setState

Vir 发表于 Dev

为了

我正在学习 ReactJS 并且正在开发一个待办事项列表应用程序。

在我的页面中，我有一个任务文本框和一个用于将任务添加到 items 数组的按钮。我面临一个问题，当我单击“添加任务”按钮添加我的第一个任务时，它似乎不是第一次添加，然后当我添加第二个任务时，添加了第一个任务，但没有添加第二个任务，依此类推。我console.log(this.state.items)用来知道我有哪些项目，问题是下一次添加上一个项目。

我只是在学习 React 而不是该技能的经验丰富的人，非常感谢有关所面临问题的任何帮助和解释以及我如何解决它。

下面是我到目前为止编写的代码。

import React, {Component} from 'react';    
class TodoList extends Component{    
  addTask(event){    
      //Get task Value
      var task = this.refs.name.value;

      if(task!==""){
          var newItem = {
              text : task,
              key : Date.now()
          }

          this.setState({
              items : this.state.items.concat(newItem)
          });

        this.refs.name.value = ""; //Blank out the task input box
      }

      console.log(this.state.items);
  }   



  constructor(props){
    super(props);

    this.state = {
        items : []
    };
    this.addTask = this.addTask.bind(this);
  }
  render(){
    return(
    <div className = "todolistMain">
        <div className="header">
            <form>
              <input placeholder="Enter Task" id="name" ref = "name"></input>
                <button type="button" onClick={this.addTask}>Add Task</button>
            </form>
        </div>
    </div>
    );
  }
}

export default TodoList;

阿罗拉海滩

您看到 console.log(this.state.items) 显示以前的状态，因为 setState 是一个异步调用。

问题：-在执行 setState 之前打印控制台日志。

解决方案：-使用回调，使用回调，当我们想在状态改变时执行一些操作/console.log。

更新代码：-

this.setState({
        items: this.state.items.concat(newItem)
      },()=>{
        this.refs.name.value = "";
        console.log(this.state.items);
      });

希望这可以帮助，

干杯！！

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。