javascript - React中数组（状态）中对象的访问字段

Question

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

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

此状态设置在 useEffect 挂钩中：

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

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

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

projectTypes[0]._id

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

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

}, [projectTypes]);  

我有两个问题：

1. 这是确保在访问状态时它已经具有内部值的正确程序：创建一个以 [projetTypes] 作为第二个参数的新钩子吗？

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

标签： javascriptreactjsstatesetstateuse-effect

Answer 1

由于每当其任何依赖项更新时都会调用效果，因此您可以将其作为单一效果来执行。

在 effect 中，检查其中的数据是否有效，如果是，则做某事，否则继续。

喜欢

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