React中数组（状态）中对象的访问字段答案

【问题标题】：Access field of object in array (state) in ReactReact中数组（状态）中对象的访问字段
【发布时间】：2021-03-31 06:21:06
【问题描述】：

在 React 组件中，我有一个名为 projectTypes 的状态，它是一个对象数组：

const [projectTypes, setProjectTypes] = useState([])

这个状态是在一个 useEffect 挂钩中设置的：

useEffect(() => {
...
  setProjectTypes(...)
...
})

带有从获取到服务器的信息。该信息显示在表格中，一切都按预期工作。

我想检查状态数组的第一个元素（一个对象）内的一个字段：

projectTypes[0]._id

为了确保在 projectTypes 已有值时访问它，我使用了另一个钩子：

useEffect(() => {
...
  console.log(projectTypes[0]);
  console.log(projectTypes[0]._id);
...

}, [projectTypes]);

我有两个问题：

这是确保在访问状态时其内部已有值的正确程序：创建一个以 [projetTypes] 作为第二个参数的新钩子吗？
在第二个钩子中，如果我只使用第一个 console.log - console.log(projectTypes[0]) - 一切都按预期工作，并且状态的第一个对象将使用 _id 字段打印到控制台。但是使用第二个 - console.log(projectTypes[0]._id) - 会导致错误：“TypeError: Cannot read property '_id' of undefined”。为什么我可以很好地访问状态数组中的对象，并打印它的所有字段，但如果我尝试访问其中一个字段，我会收到错误？

【问题讨论】：

是的，创建多个 useEffect 函数很常见。虽然它有 projectTypes 作为依赖数组，但请记住，它也会在组件挂载时调用它，此时数据尚未获取。所以你仍然需要在这里检查：if (!projectTypes) return;
你可以在useEffect里面添加空检查projectTypes[0] && projectTypes[0]._id。无论如何，您还可以创建另一个状态，看起来像这样 const [loading, setLoading] = useState(true)，然后在 fetch 函数中反转 loading
@szczocik，我不知道当使用依赖数组传递第二个参数时，传递给 useEffect 的函数也会在安装组件时运行。感谢您指出这一点！

【解决方案1】：

由于任何依赖项更新时都会调用效果，因此您可以将其作为单个效果来完成。

在效果内，检查其中的数据是否有效，如果是，做一些事情，否则继续。

喜欢

useEffect(() => {
    if(projectTypes && projectTypes.length >0){
        //do something
    }
}, [projectTypes]);

【讨论】：

我想我明白会发生什么，但是，为了完全理解它，@Adithya，你能详细说明为什么我们需要检查这两个条件：projectTypes && projectTypes.length > 0 吗？您能否提供一种我们会通过第一个测试但第二个测试不通过的情况？
如果您的初始状态是一个数组 (useState([])) 并且您确定即使在任何更新之后它也会是一个数组，则不需要这两项检查。如果你有 null 表示空值（useState(null)，通常是useRef）。您将首先检查它是否为空，这样projectTypes.length 就不会抛出TypeError: Cannot read property 'length' of null