Javascript 如何从React中的数组中获取值？

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

在我的函数组件中，我从GraphQLAPI获取数据并正确设置状态。在我的模板中，我使用

{image}

来渲染它。但是，如果我尝试使用

{images[0]}

或

{images[1]}

，则不会呈现该页面，并且出现以下错误：“images is undefined”

在React开发者工具中，我可以看到“images”变量正确地显示了3个URL。对API的查询也可以正常工作

为什么我的应用程序在使用

{image}

时工作正常，而在使用

{images[0]}

时工作不正常？

---

看起来您正在填充数据之前访问阵列

如果使用的是

react apollo

query组件，则需要检查

load

标志。如果为false，则只需要渲染组件

你也可以试试这个

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

你需要改变

{images[0]}

对,

上面代码的原因是，

images

数组不在模板中填充，因为它是异步的（当您从api获取时）

因此，在初始阶段，它将是空数组，您试图使用未定义的，

images[0]

访问第一个索引值

因此，要等待数据加载，您可以检查如下条件：

1）让我们先确认我们有

图像

值

2）如果满足条件，则继续执行

图像[0]

3）如果两个条件都满足，则渲染

图像[0]

，直到将其保持为空

另外，加载

{image}

时没有任何错误的原因是，由于它是一个字符串，它会直接检查条件，因此只有在

{image}

具有发生在幕后的值时才会渲染

---

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

您可以共享此组件的一些代码以便我们提供帮助吗？我可以查看相关的react代码吗？您可以尝试像

{images&&images[0]？images[0]：null}

@ManirajMurugan那样的代码工作吗？您能解释一下发生了什么事吗？@LuisGarcia，作为答案张贴。。请检查解释并接受它是否解决了您的问题。谢谢，我会接受这一正确答案。但是，您能否评论一下，在这些情况下，什么是最佳解决方案？这似乎是一个快速解决办法，但我不知道这是否是最好的处理方法situations@LuisGarcia，根据我的理解，这就是react中的工作原理，因此我相信这是一个直截了当的最佳解决方案。。此外，您还可以在指定的位置使用默认值将变量

images

定义为

[]

。。类似于

let images=[]

。示例链接（这是针对map方法的，但这也是在所有其他情况下处理未定义错误的方式。）。。

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