在 React 中访问数组中对象的属性

Question

所以我已经尝试解决这个问题一段时间了，我真的希望有人能够提供帮助

我正在创建一个数组并像这样在其中存储一个对象列表。

    const heroPost = postList.filter(post => post.hero);

当我控制台记录 heroPost 时，我得到以下结果。

我正在尝试访问此对象中的 url 属性，如下所示。

    console.log(heroPost[0].url);

但我一直收到这个未定义的错误。

我不太确定这里出了什么问题。我正在使用异步函数从数据库中获取数据，我猜这可能是个问题，但我正在从 jsx 中的 'postList' 输出数据，我曾将数据检索到 'heroPost' 所以我不确定它是如何成为问题的。任何帮助或想法将不胜感激。

谢谢！

编辑：这是使用 'postList' 呈现数据的组件部分。效果很好。

                <div className="posts-container">
                {postList.map((post) => (
                    <div key={post.id} className="post">
                        <h3 className="post-title">{post.title}</h3>
                        <div className="post-info">
                            <p className="author">{post.author}</p>
                            <p className="timestamp">{post.author}</p>
                        </div>
                        <p className="content">{post.body}</p>
                        <img src={post.url} alt="" />
                    </div>
                ))}
            </div>

我现在想做的是使用 heroPost 将数据渲染到页面的英雄部分，如下所示，但它仍然抛出未定义的错误。

  <div className="hero">
                <img src={heroPost[0].url} alt="" />
            </div>

谢谢大家的评论和回答，我现在明白问题所在了。仍然不明白为什么它在 'postList' 实例中而不是在这里起作用。有没有一种方法可以在不直接尝试转到我检索数据的文件并将其添加到该函数的情况下执行此操作？

Answer 1

简单的回答：你得到这些错误是因为它是未定义的

如果你看一下 console.log 你会在第一行看到一个空数组

那是因为当你第一次渲染你的组件时 postList 是一个空数组。

只有在您获取数据并填充数组后，您才能访问它

你可以试试看

useEffect(() => {
  setHeroPost(postList.find(p => p.hero))

}, [postList])

Answer 2

由于您使用异步函数获取数据，因此当包含此代码的组件首次呈现时，它不会拥有呈现该组件所需的数据。

因此'undefined'

您可以通过有条件地渲染组件来解决此问题。即只有在数据可用后才渲染组件。

由于您还没有分享组件代码，您可以参考这个反应文档来帮助解决这个问题：Conditional Rendering

编辑：以下是该条件的工作原理。这是假设 postList 是一个状态变量，并且 re-render 将在其值更改时触发：

对于您分享的第二个片段：

<div className="hero">
  {(heroPost && heroPost[0])?<img src={heroPost[0].url} alt="" />:'No data'}
</div>

在 React 中访问数组中对象的属性

Acessing properties of an object in an array in React

javascript

asynchronous

reactjs