javascript - 无法通过 ReactJS 中的 Prop 访问对象属性

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读取未定义的属性“...”

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

Answer 1

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

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

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