无法从 React 组件中的 object 访问值

Question

{JSON.stringify(props.db[1]), console.log(props.db[1])}

• props.db 是一个对象数组 [{},{},{}]
• 使用以下值 id、trick 和重定向
• {"id":2,"trick":"kickflip","redirect":"http://www.ha.com"} 当我 console.log props.db[1] 我得到了我需要的 object 但当我尝试从中获取单个值时，执行 console.log(props.db[1].id)、console.log(props.db[1].trick) 或 console.log(props.db[1] .redirect）我得到错误：未捕获的TypeError：无法读取未定义的属性（读取'id'）对我来说，这毫无意义是什么原因。 如果我在迭代时做同样的事情，可以说 map 它工作得很好。

Answer 1

很有可能在某个时间点， props.db是空的（即 null/undefined 或空数组，因为它仍然从服务器异步获取它）。 您需要在渲染之前检查它：

{props.db && props.db.length >= 1 && (JSON.stringify(props.db[1]), console.log(props.db[1]))}

这意味着当它是空的（即网络请求仍在进行中）时，它不会尝试访问它。

可能您的代码在网络请求返回之前默认为空数组[] - 这可以解释map工作原理。 这将循环 0 个项目，因此不会发生意外执行，而尝试访问空数组的第一项将不起作用，除非您确定它存在。