无法通过 ReactJS 中的道具访问对象属性答案

【问题标题】：Cannot access object properties via props in ReactJS无法通过 ReactJS 中的道具访问对象属性
【发布时间】：2020-06-23 19:16:10
【问题描述】：

我从 API 获取数据并将其传递给 Table 组件，如下所示：

function MainSectionOrganization() {

    const [obj, setObj] = useState([]);

    useEffect(() => {
        fetch('http://127.0.0.1:5000/getCompanies')
        .then((response) => {
            return response.json();
        }).then((data) => {
            setObj(data);
        })
    }, []);

    return (
        <Table data={obj} />
    )
}

然后，在 Table 组件中，我尝试为 props.data[0] 执行 console.log，我在 Chrome 终端中正确地看到了数据。

import React from 'react';
import './Table.css';
import { useTable } from 'react-table';

function Table(props) {

    console.log(props.data[0]);
    ...

但是，当我尝试访问对象的任何属性时，例如 console.log(props.data[0].OU01_Code)，我遇到了一个错误 Cannot读取未定义的属性“...”

我看到很多人都有类组件的解决方案，但由于某种原因我需要使用函数组件。你能帮我解决这个问题吗？

【问题讨论】：

标签： javascript reactjs undefined react-props

【解决方案1】：

嘿，问题是你试图访问props.data[0].OU01_Code，但它还不存在，所以你需要做一些条件来检查它是否存在。试试：

if (props.data && props.data[0]) {
  console.log(props.data[0].OU01_Code)
}

如果有帮助请告诉我，干杯

【讨论】：

您的解决方案对我有用。非常感谢您的帮助。

【解决方案2】：

fetch 是异步的。所以首先组件所做的事情是用一个空数组渲染：

const [obj, setObj] = useState([]);
//...
return (
    <Table data={obj} />
)

当这种情况发生时，对该数组元素的任何引用都是undefined：

props.data[0]

因此尝试读取该未定义数组元素的属性将导致确切的错误：

props.data[0].OU01_Code
// Cannot read property 'OU01_Code' of undefined

之后 fetch 解析其结果并更新状态，obj 有元素（大概）并且您可以访问它们。

从概念上讲，您需要处理数组为空的情况。在这种情况下，你想显示<Table /> 吗？如果没有，可以有条件的在父组件中显示：

return (
    <>
        {obj.length > 0 && <Table data={obj} />}
    </>
)

或者，如果您确实想用空数组显示<Table />，那么您需要在该组件中包含逻辑（我们目前无法看到）来处理空数组。基本上，您需要在尝试访问props.data[0] 之前检查props.data.length。

【讨论】：

您好，非常感谢您的建议。它很有用，它解决了我的问题。

【解决方案3】：

因为初始渲染将在 API 调用完成之前发生，您可以使用 props.data && console.log(props.data[0]) 或者如果您愿意使用 可选链接，即使 props?.data?.[0]

也很容易

【讨论】：

非常感谢您的建议。