javascript - 从数组列表渲染列表

Question

我有一个应用程序，通过单击按钮，我可以将 randomuser api 中的数据添加到我的数组中，然后将其呈现为列表。

   const onClickHandler = () => {
     axios.get("https://api.randomuser.me/")
     .then(res => {
        const data = res.data.results["0"]
        setPosts(data)
        addHistory(prevInputState => ([...prevInputState,data.name.first]))
        console.log(data)
     })
   }

   const[posts,setPosts] = useState([])
   const[history,addHistory] = useState([])

在这种情况下，我将整个数据集加载到“帖子”中，并将名字加载到“历史”中

然后我就可以呈现使用以下方式获取的所有名字的列表:

{history.map((name)=> (
  <Item> {name} </Item>
))}

当我只将数据中的名字保存到“历史”状态时，这很有效。如果我想存储整个数据(而不是 data.name.first )，然后使用列表来检索相同的名字列表，我该如何继续？

谢谢

Answer 1

您不能只使用现有的帖子状态来迭代和访问相关数据，而不是为历史记录保留单独的状态吗？

{posts.map((data)=> (
    <Item> {data.name.first} </Item>
  ))}