React 状态对象更新并将其发送到数据库答案

【问题标题】：React state object updating and sending it ot databaseReact 状态对象更新并将其发送到数据库
【发布时间】：2017-06-13 13:38:39
【问题描述】：

我正在编写一些应用程序，其中创建包含一些数据的项目。其中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 内部的服务器上，我只收到来自成员数组的旧对象。我不知道为什么会这样。也许我做错了什么...寻求您的帮助和建议。

【问题讨论】：

你在哪里有 API 调用，是在 updateMember 函数本身还是其他函数
setState 是异步的；您不能调用 setState 然后立即从状态读取而不等待至少一个事件循环滴答声。

标签： arrays json reactjs object

【解决方案1】：

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

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

【讨论】：

我正在设置状态（更新成员数组中的一些成员）。之后我点击按钮提交表单（本地函数调用paren'ts方法，其中我传递对象填充this.state字段）父方法接收此数据并执行操作调度（此操作向服务器发出请求） .这个动作应该接收一些要在服务器上发送的有效负载，所以我将从子参数数据接收到这个动作
如果我在提交函数中执行console.log(this.state.members)（在调用父函数之前），我会在控制台中看到相同的对象。图片上的[object Object] 包含更改数据的对象...所以我不明白为什么我在服务器上收到错误的数据
当您进行控制台日志时 - 它不会在调用时向您显示对象的内容。您将在展开它以查看其内容的那一刻看到对象的内容。尝试按照我的建议将提交调用放在 setState 函数的回调参数中。
应该是this.setState({ members: stateCopy.members },this.onModalSubmit) 吗？在this.onModalSubmit 里面我有e.preventDefault 所以它给了我错误。数据没有任何变化

【解决方案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
            })

        }

    }

现在一切正常

【讨论】：