时间戳

首页 > 解决方案 > setstate 中的箭头函数使用

reactjs - setstate 中的箭头函数使用

问题描述

我写了一段代码，我不太记得它是如何工作的，说起来很尴尬。

状态如下：

state={
        api:[
            {
                id: 1,
                purpose: "For the Android phone",
                link: "playgoogle/GooglePlay",
                status: "1"
            },
            {
                id: 2,
                purpose: "For the Android phone",
                link: "playgoogle/GooglePlay",
                status: "0"
            }
        ]
    }

这是我不太明白的代码片段。

activateAPI=(id)=>{
        this.setState(prev => ({
            api: prev.api.map(api => api.id === id ? { ...api, status: 1 } : api)
        }))
        this.changeStatus(id,1);
    }

我知道一个值作为 id 传递到 activateAPI 中，但我不太明白prevandapi: prev.api在这里是如何工作的。我知道api里面map就像一个foreach，它检查json数组中当前项目的id是否与函数id匹配，那是什么{...api,status:1}意思？

任何澄清将不胜感激。感谢您的阅读。

标签： reactjs

解决方案

的性质setState是异步的。当您setState使用其回调签名调用时，您所写的内容非常清楚。在内部，一旦回调完成，React 会将回调返回到setState. 这就是你正在做的，

(state, props) => stateChange

以上是setStateReact 提供的真实签名。状态是应用更改时对组件状态的引用。

欲了解更多信息链接

此外，当您使用扩展运算符时，它会扩展对象并更新已更改的道具。所以当你这样做的时候{...api, status:1}。它会将 API 对象与初始对象进行比较，并将status值更新为 1。

请记住，这将是肤浅的比较。要更新嵌套状态对象，您需要转到嵌套级别以观察正确的状态更新。

推荐阅读