获取类型错误：无法读取未定义的属性

Question

我是新手，我尝试从后端获取数据并显示。

    const { id } = useParams();
    console.log(id);

    const [posts, getPosts] = useState([]);

    useEffect(()=>{
        getOnePost();
    }, []);

    const getOnePost = async () => {
        await axios.get(`/buyerGetOnePost/${id}`)
            .then ((response)=>{
                const allPost=response.data.onePost;
                getPosts(allPost);
            })
            .catch(error=>console.error(`Error: ${error}`));
    }
    console.log(posts);

    console.log(posts.location.latitude);
    console.log(posts.location.longitude);

我传递了一个 id 并从后端获取数据，它工作正常。但是，当我尝试获取该位置的纬度和经度时，会出现如下错误：

TypeError: 无法读取未定义的属性“纬度”

当我这样写代码时：

    console.log(posts.location);
    console.log(posts.location);

它没有给出任何错误。但是当我尝试访问位置对象中的数据时，它会给出上述类型错误。

This is a screenshot of location object

console.log(posts);

这给出了整个帖子的输出。

Image of the whole post

就像这张图片。在帖子内部，有一个名为 location 的对象。在 location 对象中，它有一个 Id、经度和纬度。当我console.log(posts.location) 这样做时，位置对象会打印在控制台中。但是当我想访问位置对象中的经度和纬度时，它会报错。

我该如何解决这个问题？

Answer 1

您的代码存在一些问题：

1. 您已将useState() 默认值定义为一个空数组[]，然后您将posts 视为一个对象。
2. 其次，当代码运行时，posts 的值是 []，然后您尝试打印出 console.log(posts.location.latitude);，这可能会给您一个错误。
3. 异步等待使用不正确。

我会将我的代码结构如下：

    const { id } = useParams();
    console.log(id);

    const [posts, setPosts] = useState({});
    const [loading, setLoading] = useState(true);

    useEffect(()=>{
        getOnePost();
    }, []);

    useEffect(()=>{
        if (posts && posts.location) {
            console.log(posts.location);
            console.log(posts.location.longitude);
            console.log(posts.location.latitude);
        }
    }, [posts]);


    const getOnePost = async () => {
        try {
             const response = await axios.get(`/buyerGetOnePost/${id}`)
             console.log(response);
             const allPost=response.data.onePost;
             setPosts(allPost);
        } catch (error) {
             console.error(`Error: ${error}`))
        }
    }

希望这会有所帮助，基本上您已经在第二个 useEffect 中添加了帖子作为依赖项，以便在其值更改时运行。

Answer 2

对象肯定有问题。你确定是posts.location.latitude？ posts.latitude 呢？