时间戳

首页 > 解决方案 > 无法读取未定义的属性“xxx”-使用 axios

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

问题描述

我在访问 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>，我得到了标题中的错误。当我检查控制台时，我可以看到所有数据都在那里。

谢谢

标签： javascriptreactjsaxios

解决方案

在您的效果中，您正在设置一个将用户描述为您的状态的对象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.gendervalue 只是undefined- 你试图gender从 object访问字段{data: []}。所以它呈现一个空的div.

同时，当<div>{posts.name.first}</div>尝试渲染时 -posts.name也只是undefined，您基本上是在尝试first从undefined.

推荐阅读