無法讀取未定義的屬性 '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>中使用它

但是，當我嘗試將 go 降低一步<div>{posts.name.first}</div>時，我得到了標題中的錯誤。 當我檢查控制台時，我可以看到所有數據都在那里。

謝謝

Answer 1

在您的效果中，您正在設置一個 object 來描述您的 state posts的用戶，例如

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

但是，當您在const[posts,setPosts] = useState({data: []})中創建 state 時 - 您將posts {data: []}設置為默認值。

在您的第一次渲染期間，尚未從請求中檢索到用戶的數據，因此該組件仍在使用{data: []} 。

當<div>{posts.gender}</div>被渲染時——它並沒有失敗，因為在這種情況下posts.gender值只是undefined ——你試圖從 object {data: []}訪問字段gender 。 所以它呈現一個空的div 。

同時，當<div>{posts.name.first}</div>嘗試渲染時， posts.name也只是undefined ，您基本上是在嘗試從undefined first訪問字段。