如何从 React 中的数组中获取值？
How get values from array in React?
我正在开发一个简单的电子商务商店。产品信息存储在 DynamoDB (NoSQL) 中。
Product table 中的项目有一个带有单个 URL 的 "image" 属性，还有一个存储多个字符串的 "images" 属性。我刚刚添加了 "items" 属性来测试我是否可以存储多个 URL（指向 S3 存储桶中的图像）
在我的功能组件中，我从 Graphql API 获取数据并正确设置状态。在我的模板中，我使用 {image} 来渲染它。但是，如果我尝试使用 {images[0]} 或 {images[1]}，则页面不会呈现，并且出现以下错误："images is undefined".
在 React Developers Tools 中，我可以看到 "images" 变量正确显示了 3 个 url。对 API 的查询也能正常工作。
为什么我的应用程序在使用 {image} 时可以正常运行，但在使用 {images[0]} 时却不能？
看起来您是在填充数据之前访问数组。
如果您使用 react-apollo 查询组件，则需要检查 loading 标志。如果 loading 为 false，那么只需要渲染您的组件。
或者你可以试试这个
{images && Array.isArray(images) && images.length ? images[0] : null}
你需要改变，
{images[0]}
给，
{images && images[0] ? images[0] : null}
上述代码的原因是，images 数组不会填充到模板中，因为它是异步的（因为您正在从 api 获取）。
因此在初始阶段它将是空数组，您正尝试使用未定义的 images[0] 访问第一个索引值。
所以要等待数据加载，您可以检查条件，
1) 让我们首先确认我们有 images 值。
2)如果满足条件则继续images[0].
3) 如果两个条件都满足，则渲染 images[0] 直到然后保持它为空。
另外，{image} 没有任何错误地加载的原因是，因为它是一个字符串，它会直接检查条件，所以它只在 {image} 具有发生在后面的值时呈现场景..
当您尝试访问未定义的值时，您将收到该错误。
我正在开发一个简单的电子商务商店。产品信息存储在 DynamoDB (NoSQL) 中。 Product table 中的项目有一个带有单个 URL 的 "image" 属性，还有一个存储多个字符串的 "images" 属性。我刚刚添加了 "items" 属性来测试我是否可以存储多个 URL（指向 S3 存储桶中的图像）
在我的功能组件中，我从 Graphql API 获取数据并正确设置状态。在我的模板中，我使用 {image} 来渲染它。但是，如果我尝试使用 {images[0]} 或 {images[1]}，则页面不会呈现，并且出现以下错误："images is undefined".
在 React Developers Tools 中，我可以看到 "images" 变量正确显示了 3 个 url。对 API 的查询也能正常工作。
为什么我的应用程序在使用 {image} 时可以正常运行，但在使用 {images[0]} 时却不能？
看起来您是在填充数据之前访问数组。
如果您使用 react-apollo 查询组件，则需要检查 loading 标志。如果 loading 为 false，那么只需要渲染您的组件。
或者你可以试试这个
{images && Array.isArray(images) && images.length ? images[0] : null}
你需要改变，
{images[0]}
给，
{images && images[0] ? images[0] : null}
上述代码的原因是，images 数组不会填充到模板中，因为它是异步的（因为您正在从 api 获取）。
因此在初始阶段它将是空数组，您正尝试使用未定义的 images[0] 访问第一个索引值。
所以要等待数据加载，您可以检查条件，
1) 让我们首先确认我们有 images 值。
2)如果满足条件则继续images[0].
3) 如果两个条件都满足，则渲染 images[0] 直到然后保持它为空。
另外，{image} 没有任何错误地加载的原因是，因为它是一个字符串，它会直接检查条件，所以它只在 {image} 具有发生在后面的值时呈现场景..
当您尝试访问未定义的值时，您将收到该错误。