无法通过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)
}

让我知道是否有帮助，欢呼

Answer 2

fetch是异步的。因此，使用空数组来呈现组件执行的 first 事情：

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.length，然后再尝试访问props.data[0]。

Answer 3

因为初始渲染将在API调用完成之前进行，所以您可以使用props?.data?.[0]，或者如果您愿意使用可选链接，即使GuildMember也很容易