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

Posted 2023-03-17

【中文标题】useEffect 尝试在 React 中更新状态之前读取对象的属性

【英文标题】：useEffect tries to read property of object before the state was updated in 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？

谢谢！

【参考方案1】：

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

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