Question

获取 TypeError：无法读取未定义的属性

2021-08-02

788

reactjs

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

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);

它没有给出任何错误。但是当我尝试访问 location 对象中的数据时，它给出了上述 typeError。

这是 location 对象的屏幕截图

console.log(posts);

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

整个帖子的图片

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

我该如何解决这个问题？

Answer 1

您的代码存在一些问题：

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

我将我的代码结构如下：

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}`))
        }
    }

希望这有帮助，基本上您已将 posts 添加为第二个 useEffect 中的依赖项，以便在其值发生变化时运行。

Answer 2

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

Sowam

2021-08-02