useEffect 尝试在 React 中更新状态之前读取对象的属性答案

【问题标题】：useEffect tries to read property of object before the state was updated in ReactuseEffect 尝试在 React 中更新状态之前读取对象的属性
【发布时间】：2021-10-20 03:14:22
【问题描述】：

我在 React 中使用 createContext() 将数据级联到我的组件。在此我有一个 API 调用，我在其中获取两个不同的对象数组，映射它们，并创建最终的数据集，例如：

const [organizationData, setOrganizationData] = useState([
    {
        id: "",
        orgName: "",
        street: "",
        city: ""
    }
])

const organizationFunction = async () => {
    try {
        const data = await axios
        .get(
            API_URL + `organizations/${someUniqueId}`
        )
        .then(res => {
            const masterData = res.data.master
            const contactData = res.data.contact
            const combinedData = masterData.map((item, i) => Object.assign({}, item, contactData[i]))
            setOrganizationData(combinedData)
        })
        setOrgLoading(true)
    } catch (e) {
        alert(e)
    }
}

然后我将数据发送给孩子

<AuthContext.Provider organizationData={organizationData}>
    {children}
</AuthContext.Provider>

现在，当我尝试从其中一个孩子那里访问这些数据时，特别是使用数据库中的数据填充表单的输入时，在安装组件时在 useEffect 的帮助下，它崩溃了，因为一开始organizationData 未定义，只是我预先定义的空对象，因此它尝试读取 organizationData.orgName 并与 Cannot read property 'orgName' of undefined 中断。

如果我在上下文组件中console.log(organizationData)，则输出为

[{…}]
0: {id: "", orgName: "", street: "", city: ""}

(1) [{…}]
0: {id: 12, orgName: "MyOrganization", street: "Skalitzerstr. 31", city: "Berlin"}

所以第一个输出为空，然后状态更新。

在我的子组件中向我的表单添加数据时，我尝试过短路，但这不起作用，它仍然会因Cannot read property 'orgName' of undefined 而崩溃。

useEffect(() => {
    setFillingData({
      ...fillingData,
      orgName: organizationData.orgName || "",
      ...
  })
}

知道这里到底出了什么问题，如何避免在状态更新和数据/对象创建之前导出organizationData？

谢谢！

【问题讨论】：

标签： javascript reactjs use-effect setstate use-state

【解决方案1】：

你可以在useEffect的依赖数组中添加organizationData

useEffect(() => {
  if(organizationData){
    setFillingData({
      ...fillingData,
      orgName: organizationData.orgName || "",
      ...
   })
  }
}, [organizationData])

【讨论】：