Question

好的，所以我正在用React驱动的U / I构建这个CRUD应用程序。我的状态更新出现问题。以下是该问题所涉及的代码段。我尝试自己弄清楚它的状态，并认为这是我的状态正确更新，但是在状态可以更新之前它已发送到服务器，并且当我重新安装组件时，它从服务器获取了旧状态并覆盖了新状态。服务器始终获得的状态是实际项目数为n-1。另外，如果您知道我可以改善的任何方法，请告诉我，我觉得这是要做3个任务的大量工作！

谢谢。

我的状态

     this.state = {
            newItem:{},
            todos:[]
        }

检索方法

    componentDidMount(){
        this.getTodos(this.props);
    }

    getTodos(props){
        axios.get(process.env.REACT_APP_SERVER+`/${props.match.params.id}/todos`)
        .then(
            (res)=>{
                this.setState({todos:[...res.data]});
            }
        )
    }

我的创建和更新方法

    handleOnChange(e){
        this.setState({newItem:{title:e.target.value, complete:false}});
    }

    addNewItem(){
        this.setState({todos:[...this.state.todos, this.state.newItem]});
        this.updateTodoList(this.props);
    }

    updateTodoList(props){
        axios.put(process.env.REACT_APP_SERVER+`/${props.match.params.id}/todo/add`, this.state.todos).then(res=>{
            console.log(res.data);
        });
    }

更新：噢，快点！我就是这么想的，您已经解决了我的错误！

Answer 1

问题是您在状态更新之前正在致电updateTodoList。

执行此操作：

addNewItem(){
        this.setState({todos:[...this.state.todos, this.state.newItem]}, () => {
              this.updateTodoList(this.props);
        });
    }

setState有一个回调，该回调在状态已更新之后被调用，因此可以确定的位置是此回调，然后调用下一个fn。

Answer 2

状态更新是一个异步过程。

这里的问题是您的更新API调用在状态之前发生更新。

要解决此问题，请使用以下语法进行状态更新。

addNewItem () {
  this.setState (
    {todos:[...this.state.todos, this.state.newItem]},
    () => {
    this.updateTodoList(this.props);
    }
  );           
}

为什么我的反应状态无法正确更新？

2 个答案: