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-您正尝试从对象{{ 1}}。因此，它呈现了一个空的gender。

同时{data: []}尝试呈现-div也只是<div>{posts.name.first}</div>，而您基本上是在尝试从posts.name访问字段undefined

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

1 个答案: