Question

我正在编写一些应用程序来创建包含一些数据的项目。其中1个字段是members。它是项目成员数组（数组中的对象）。我有一个项目更新功能，但在我更新项目中的成员数据时出现问题。在我的服务器端，我总是收到旧数据。

方法更新成员数组的状态。它找到所需的对象（应该更新的成员）并更新其数据

updateMember(data){

        let objectIndex = this.state.members.filter((member,index) => {
            if(data.id === member.id) return index;
            return -1;
        })

        if(objectIndex !== -1){

            let stateCopy = Object.assign({},this.state);
            stateCopy.members[objectIndex] = data;

            this.setState({
                members: stateCopy.members
            })           

        }

    }

然后，我点击按钮提交数据，并将状态数据发送到某个操作，该操作会向REST API发送查询。在将数据发送到服务器之前，我做了console.log()以确定我发送的数据。我得到但是在request.body内的服务器上，我只收到成员数组中的旧对象。我不知道为什么会这样。也许我做错了什么......寻找你的帮助和建议。

Answer 1

其中一个原因可能是setState是异步的并且调用它不会导致立即更新this.state值。

检查您是否在调用setState后立即提交数据 - 如果是 - 请确保在回调函数中执行此操作，该函数可作为下一个参数传递给setState。

Answer 2

问题出在updateMember函数中。
改为：

updateMember(data){

        let objectIndex = this.state.members.filter((member,index) => {
            if(data.id === member.id) return index;
            return -1;
        })

        if(objectIndex !== -1){       

            let stateCopy = Object.assign({},this.state);

            stateCopy.members.splice(objectIndex,1, data);

            this.setState({
                members: stateCopy.members
            })

        }

    }

现在一切都很顺利

反应状态对象更新并将其发送到数据库

2 个答案: