时间戳

首页 > 解决方案 > 无法访问 ReactJS 中的嵌套状态对象

reactjs - 无法访问 ReactJS 中的嵌套状态对象

问题描述

我正在尝试访问 ReactJS 中的嵌套对象。这是对象的样子：

const characteristics = [
        { id: "geo", content: 'Geopolitical' },
        { id: "dog", content: 'Dog Loving' },

    ];

    const starterColumns = {
        "1": {
            name: 'I am',
            items: characteristics
            },
        "2": {
            name: 'fullstack developer',
            items: []
        }
    }

    const [columns, setColumns] = useState(starterColumns);

这是我尝试时遇到的错误console.log(columns['2']['items']['0']['id'])：

TypeError: Cannot read property 'id' of undefined

这是否与我正在使用有状态变量的事实有关？嵌套对象有什么奇怪的地方吗？谢谢您的帮助！

编辑

问题是列中没有对象，所以我没有对象可以访问。现在突出的问题是如何在不显示新的拖放块的情况下填充该空白。感谢您的帮助！

编辑

我使用try/catch语句来检查对象，因此如果它为空，则不会发生任何事情。

标签： reactjs

解决方案

仅对无法处理的错误使用 try catch

要访问元素，请尽可能使用点符号，而不是使用括号符号 []

当您无法访问 id 的项目中有一个空数组时，您将收到错误，因此解决方案是检查数组是否为空

columns['2'].items.length > 0

要访问数组的第一个元素，您必须使用 [0] 而不是 ['0']

试试这个解决方案

if (columns['2'].items.length > 0) {
  console.log(columns['2'].items[0].id)
}

推荐阅读