无法读取我从 axios 获得的对象的属性

Question

我正在使用 react useState 钩子来设置一个空数组状态，然后我使用 useEffect 通过 axios 获取一些占位符数据。放置后，我尝试获取对象，但如果我尝试获取 postData1.body，它一直告诉我 postData1 未定义。

起初我以为它是一个数组，但是当我使用 typeof 时，它清楚地表明它是一个对象。所以我很困惑这里出了什么问题。是我获取数据不佳还是怎么回事？

提前致谢！

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function Home() {
  const [postData, setPostData] = useState([]);

    useEffect(() => {
      axios.get('https://jsonplaceholder.typicode.com/posts').then(res => {
        setPostData(res.data);
      })
    }, [])


    console.log(typeof(postData[1]))
    console.log(postData[1])

    return (
        <div className="container">
            <h4 className="center">Home</h4>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
              Unde, deleniti, amet iste ratione fugiat, dolorem aliquid adipisci aperiam rem iure provident ad? 
              Incidunt recusandae pariatur nisi quaerat corporis harum aperiam.</p>
        </div>
      );
    }

    export default Home;

编辑： 刚看到可以发图。所以也许这可能会有所帮助：第一张图片是当我使用 console.log(postData1，第二张图片是当我使用 console.log(postData1.body

Answer 1

由于axios.get 是异步的，当您尝试从函数组件内部而不是钩子中检查更改时，它将显示未定义。如果您想看到响应，您可以直接添加成功axios.get，如下面的代码。

axios.get('https://jsonplaceholder.typicode.com/posts').then(res => {
  setPostData(res.data);
  console.log(res.data);
})

如果您想确保postData 已填满。您可以查看以下代码。

useEffect(() => {
    console.log(typeof(postData[1]));
    console.log(postData[1]);
}, [postData])