无法读取未定义的属性“xxx”-使用 axios

Question

我在访问 api 返回的一些数据时遇到了问题。 当我像这样使用 setPosts(data) 分配数据时

useEffect(() => {


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




 },[])

到这里：const[posts,setPosts] = useState({data: []})

我可以在<div>{posts.gender}</div>中使用它

但是当我尝试降低一步时，<div>{posts.name.first}</div>，我得到了标题中的错误。 当我检查控制台时，我可以看到所有数据都在那里。

谢谢

Answer 1

在您的效果中，您正在将一个描述用户的对象设置为您的状态posts，例如

{
  gender: "female",
    name: {
    title: "Miss",
    first: "Nicoline",
    last: "Løvli"
  },
  location: {
  ...
}

但是，当您在 const[posts,setPosts] = useState({data: []}) 中创建状态时 - 您将对象 {data: []} 设置为 posts 作为默认值。

在您的第一次渲染期间，尚未从请求中检索到用户的数据，因此该组件仍在使用{data: []}。

当<div>{posts.gender}</div> 被渲染时——它并没有失败，因为在这种情况下posts.gender 值只是undefined——你试图从对象{data: []} 访问字段gender。 所以它呈现一个空的div。

在<div>{posts.name.first}</div> 尝试渲染的同时-posts.name 也只是undefined，而您基本上是在尝试从undefined 访问字段first。