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

Question

我从 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 read 属性 '...' of undefined

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

Answer 1

嘿，问题是您尝试访问 props.data[0].OU01_Code 但它还不存在，因此您需要设置某种条件来检查它是否存在。尝试：

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

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

Answer 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

Answer 3

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

也很容易

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

Cannot access object properties via props in ReactJS

javascript

undefined

reactjs

react-props