无法通过 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 )，我遇到错误无法读取未定义的属性 '...'

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

Answer 1

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

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

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