Reactjs 为什么即使存在post.Images[0]也会出现问题？TypeError:无法读取属性'；0'；未定义的

post.Images从控制台输出

console.log("post.Images " , post.Images);

输出：

[{…}]
0: {id: 5, src: "dokyo11573054801107.png", createdAt: "2019-11-06T15:40:02.000Z", updatedAt: "2019-11-06T15:40:02.000Z", PostId: 14}
length: 1
__proto__: Array(0)

下面的代码中出现错误

cover={post.Images[0] && <img alt="example" src={`http://localhost:3065:/${post.Images[0]}` } />}

cover={post.Images[0]&&}

错误消息：

但这很奇怪

post.Images[0]存在，但存在未定义错误

我不知道是什么引起的

非常感谢你让我知道

多谢各位

github：

---

在初始渲染期间，此时可能无法定义图像，因此您可以在本地组件中创建默认的

[]

，或者在访问位置

0

的值之前检查图像是否存在

cover={post.Images && post.Images[0] && <img alt="example" src={`http://localhost:3065:/${post.Images[0]}` } />}

您的代码片段将更改如下：

cover={Images.length && <img alt="example" src={`http://localhost:3065:/${Images[0]}` } />}

cover={Images.length&&}

在初始渲染期间，此时可能无法定义图像，因此您可以在本地组件中创建默认的

[]

，或者在访问位置

0的值之前检查图像是否存在

cover={post.Images && post.Images[0] && <img alt="example" src={`http://localhost:3065:/${post.Images[0]}` } />}

您的代码片段将更改如下：

cover={Images.length && <img alt="example" src={`http://localhost:3065:/${Images[0]}` } />}

cover={Images.length&&}
我认为，当您调用
明信片
并将
post
传递到此组件时，
post.Images
数据在第一次渲染时未定义。因此，在
明信片组件
中，
post.Images
道具将是
未定义的

我有两种方法来解决这个问题：

尝试按如下方式传递默认参数：
我认为，当您调用
post
并将
post
传递到此组件时，
post.Images
数据在第一次渲染时未定义。因此，在
明信片组件
中，
post.Images
道具将是
未定义的

我有两种方法来解决这个问题：

尝试按如下方式传递默认参数：
post.Images可能是在渲染之后但在console.log之前定义的。可以尝试cover={post&&post.Images&&post.Images[0]}没有发生错误，但图像没有输出。很可能是在渲染之后，但在console.log之前定义了post.Images。你能试试cover={post&&post.Images&&post.Images[0]}没有发生错误，但是图像没有输出是的错误消失了，但是图像仍然没有打印它似乎几乎解决了。Post.Images[0].src也可以很好地打印。我明天去试试。谢谢你的回答。错误已经消失了，但是图像仍然没有打印出来。看起来几乎解决了。Post.Images[0].src也可以很好地打印。我明天去试试。感谢您的回答。感谢您的回答错误已消失，但图像仍不显示编辑似乎已基本解决。Post.Images[0].src也可以很好地打印。我明天去试试。感谢您的回答。感谢您的回答错误已消失，但图像仍不显示编辑似乎已基本解决。Post.Images[0].src也可以很好地打印。我明天去试试。谢谢你的回答。
cover={
   post.Images && post.Images[0] && post.Images[0].src && 
   <img alt="example" src={`http://localhost:3065/${post.Images[0].src}` } />
}