如何从 React 中的数组中获取值？ [关闭]

Posted 2023-03-08

【中文标题】如何从 React 中的数组中获取值？ [关闭]

【英文标题】：How get values from array in React? [closed]

【发布时间】：2020-08-04 22:47:32

【问题描述】：

我正在开发一个简单的电子商务商店。产品信息存储在 DynamoDB (NoSQL) 中。 Product 表中的项目有一个带有单个 URL 的“图像”属性，还有一个存储多个字符串的“图像”属性。我刚刚添加了“items”属性来测试我是否可以存储多个 URL（指向 S3 存储桶中的图像）

在我的函数组件中，我从 Graphql API 获取数据并正确设置状态。在我的模板中，我使用image 来渲染它。但是，如果我尝试使用 images[0] 或 images[1]，页面不会呈现，并且出现以下错误：“图像未定义”。

在 React Developers Tools 中，我可以看到“images”变量正确显示了 3 个 url。对 API 的查询也可以正常工作。

为什么我的应用在使用image 时可以正常运行，但在使用images[0] 时却不能？

【问题讨论】：

您能分享一些此组件的代码以便我们提供帮助吗？

我能看到相关的react代码吗？

你可以试试likeimages && images[0] ? images[0] : null ??

@ManirajMurugan 代码有效，你能解释一下发生了什么吗？

@LuisGarcia，作为答案发布.. 请检查解释并接受它是否解决了您的问题..

【参考方案1】：

你需要改变，

images[0]

到，

images && images[0] ? images[0] : null

上述代码的原因是，images 数组没有被填充到模板中，因为它是异步的（因为您从 api 获取）。

所以在初始阶段它将是空数组，您尝试使用未定义的images[0] 访问第一个索引值。

所以要等待数据加载，您可以检查条件，例如，

1) 让我们先确认我们有images 值。

2) 如果满足条件，则继续使用images[0]。

3)如果两个条件都满足，则渲染images[0]，直到保持为空。

另外，image 被加载而没有任何错误的原因是，因为它是一个字符串，它直接检查条件，所以它只在image 具有在幕后发生的值时才呈现..

当您尝试从 undefined 访问值时，您将收到该错误。

【讨论】：

谢谢，我会接受这个作为正确答案。但是，您能否评论一下在这些情况下最好的解决方案是什么？这似乎是一个快速解决方案，但我不知道这是否是处理这种情况的最佳方法

@LuisGarcia，根​​据我的理解，这就是事情的反应方式，所以我相信这是最直接和最好的解决方案之一。你也可以定义变量images默认值作为[] 在您分配的地方.. 像let images = [] ..示例链接***.com/questions/24706267/… （这是用于map 方法，但这也是在所有其他情况下可以处理未定义错误的方式..

【参考方案2】：

看起来您在填充数据之前正在访问数组。

如果您使用react-apollo 查询组件，则需要检查loading 标志。如果loading 为假，那么只需要渲染组件即可。

你也可以试试这个

images && Array.isArray(images) && images.length ? images[0] : null