Question

您好我有一些数据，我试图显示反应，看起来像这样

Poll数组中有一个Options数组。当我已经映射Poll数组时，如何显示带有反应的选项数组？这就是我到目前为止所做的：

renderPost(posts){

        return posts.map((post) => {
        return (
            <div>
            <h3>{post.question}</h3>


            </div>
               );
        });
    }

Answer 1

像

这样的东西

renderPost(posts){
  return posts.map(post =>
    <div>
      <h3>{post.question}</h3>
      <ul>
        {post.options.map(option => 
          <li>{option.title}</li>
        )}
      </ul>
    </div>
  )
}

Answer 2

在循环生成jsx元素时，您永远都不要忘记添加密钥。密钥应该是唯一的，密钥应该来自数据，如果您的数据不包含每个对象的唯一ID，则使用索引作为密钥，如下所示：

唯一ID作为数据中的键

return posts.map(post =>
    <div key={post.id}>
      <h3>{post.question}</h3>
      <ul>
        {post.options.map(option => 
          <li key={option.id}>{option.title}</li>
        )}
      </ul>
    </div>
  )

如果数据数组中没有唯一的ID，请使用索引作为键

return posts.map((post, index) =>
    <div key={`Key${index}`}>
      <h3>{post.question}</h3>
      <ul>
        {post.options.map((option, i) => 
          <li key={`Key${i}`}>{option.title}</li>
        )}
      </ul>
    </div>
  )

如何使用React在数组中循环数组

2 个答案: