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

Question

I've got issues accesing some of the data returned by api. When I assign data using setPosts(data) like this

useEffect(() => {


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




 },[])

into here: const[posts,setPosts] = useState({data: []})

I can use this in <div>{posts.gender}</div>

But when I try to go one step lower, <div>{posts.name.first}</div> , I get the error as in the title. When I check the console, I can see all the data is there.

Thank you

Answer 1

In your effect, you're setting an object that describes a user to your state posts , eg

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

However when you create your state in const[posts,setPosts] = useState({data: []}) - you're setting an object {data: []} to posts as a default value.

During your first render, the user's data is not retrieved yet from request, so the component is still using {data: []} .

When <div>{posts.gender}</div> is rendered - it is not failing because in this case posts.gender value is just undefined - you're trying to access field gender from object {data: []} . So it renders an empty div .

At the same time when <div>{posts.name.first}</div> tries to render - posts.name is also just undefined and you're basically trying to access field first from undefined .