获取数组内的对象值时出现问题：TypeError：无法读取未定义的属性“name”
可能我做错了什么，我对 React 还很陌生。所以，我只需要获取产品对象属性的值。
function Products() {
const [products, setProducts] = useState([]);
useEffect(() => {
api.get('/product/list')
.then(response => {
setProducts((response.data))
})
}, [])
return (
<div className="main">
<div id="landings">
{console.log(products)}
</div>
</div>
);
}
export default Products;
当我使用
console.log(products[0])
时，我得到了这个：
但是，如果我尝试获取对象的属性，如下所示：
console.log(products[0].name)
我得到了错误
TypeError: Cannot read property 'name' of undefined
我做错了什么？
首先，您需要了解 React Hooks 的工作原理。
出现此行为的原因是，当安装此组件时，由于您使用了 useState React Hook，因此 products 会使用值 [] 进行初始化，然后进行渲染。
直到那时
- products 的值为 []
- products[0] 的值未定义 。
这就是 console.log(products[0].name) 显示 “无法读取未定义的属性‘name’”
第一次渲染完成后， useEffect 钩子就会出现，因为它在这里提供 componentDidMount 的行为，并执行 API 调用以获取 products 数据并在响应后将其分配给产品来了。
您应始终确保您没有尝试从未定义的对象访问密钥
在这里，不要使用 console.log(products[0].name)，而应使用 {products && products[0] && console.log(products[0].name)
这将防止您的代码中断。
为了更好地了解 React Hooks 的工作原理，请阅读以下内容： https://reactjs.org/docs/hooks-overview.html 由于您对 React 还很陌生，因此请从此处了解 React 的生命周期 https://reactjs.org/docs/state-and-lifecycle.html
希望您能明白。。 祝您编码愉快！！！！
最初您得到的是空数组，一旦获取数据，您就会收到非空数组 因此，您可以通过
return (
<div className="main">
{products.length && <div id="landings">{console.log(products)}</div>}
</div>
);
或
return (
<div className="main">
<div id="landings">
{products.map((product) => (
<span key={product.id}>{product.name}</span>
))}
</div>
</div>
);