React 的 useState 变异变量答案

【问题标题】：React's setState mutates variableReact 的 useState 变异变量
【发布时间】：2019-02-21 09:02:37
【问题描述】：

非常奇怪的行为，很可能是我的代码中的一个错误：

我得到一个 API 响应对象 (json)，当我使用对象的属性之一作为值 setState 时，对象发生了变化。我认为这是后端或 fetch 方法的问题，但事实证明不是。

代码一般如下：

fetch(this.props.url, {
    method: 'POST',
    body: JSON.stringify({
        class: 'property',
        action: 'view', 
        objectId: this.props.element.id,
        token: this.props.token,
    }),
})
    .then(response => response.json())
    .then(json => {
        this.setState({
            property: json.property
        });
        console.log(json);
    })

我应该得到什么：

{
        property: {
            units: {
                {
                    id: 31,
                    ...
                },
                {
                    id: 33,
                    ...
                }
            }
        }
    }

{

我实际得到的：

    property: {
        units: {
            {
                id: 33,
                ...
            },
            {
                id: 33,
                ...
            }
        }
    }
}

不用说，来自后端的响应带有正确的 id，它们是唯一的。

任何想法我可能做错了什么？这不应该发生，是吗？ json变量如何变化？

谢谢。

【问题讨论】：

能否也发布 API 以便我们看到 JSON？
在setState() 之前记录json.property，在setState() 之后记录this.state。我猜这些数据已经从 api 以这种方式出现了。响应的内容也很高兴看到只是为了确定。
stackoverflow.com/a/42038724/2404452 很多人认为setState 立即发生，这是错误的。调用setState 后日志数据不显示状态。请使用回调获取实际数据更新并与我们分享结果。
所有有效的问题。现在，通过三种方式验证来自 API 的响应 - 1) Postman，2) console.log(JSON.stringify(json))，3) 在 setState 函数中注释掉 'property: json.property' 行。所有这些都会产生正确的 ID。关于 setState 的即时性，我已经完成了回调 '..., () => console.log(this.state)' 并且它返回了错误的 ID。

标签： reactjs state

【解决方案1】：

好的，发现我的错误。这非常令人困惑，老实说，我认为这不应该是设计使然，但无论如何：

将 state.property 设置为 json.property 后，我会将 state.property 作为 prop 传递给子元素。在该子元素中，我正在使用 props.property 进行一些过滤和映射，并且在比较过滤器函数中的 id 时，有一次我错误地使用了单个等号 (=) 而不是双 (==)。

显然这设置了错误的 id 并一直返回到初始 json 响应（因此，过滤函数 -> 子元素道具 -> ？父元素状态？ -> json 响应）。因此，请谨慎使用您的过滤器功能，除非您想花几天时间跟踪不可能的事情。

【讨论】：