javascript - 反应：无法将 useState 设置为对象数组。控制台日志显示未定义

Question

我正在使用 react 和 mongoose/mongo 数据库。在页面加载时，我执行 API 调用并接收一组对象（它们是带有标题、描述等的“帖子”）。我正在尝试映射数据以在单独的卡片上动态显示帖子信息。我可以从 API 调用中获取数据，但是当我尝试将状态更改为对象数组并控制台记录它时，我得到未定义。

附上代码和结果的照片：

Info 的控制台日志

API调用代码（与图1相关-请注意代码行号）

为什么 usestate 不接受数据中的状态变化？附上我的代码：

import React, { useState, useEffect } from 'react'
import API from "../utils/API"


const Home = () => {

    const [PostObject, setPosts] = useState({
        title: "",
        description: "",
        image: ""
    })

    const [PostList, setList] = useState()


    useEffect(() => {
        retrievePosts()
    }, [])


    const handleInputChange = (e) => {
        e.preventDefault()
        setPosts({ ...PostObject, [e.target.name]: e.target.value })
    }


    const createPost = (e) => {
        e.preventDefault()
        setPosts({ ...PostObject, title: "", description: "", image: "" })
        API.addPost(PostObject)
            .then(retrievePosts())
    }


    const retrievePosts = () => {
        API.getPost()
            .then(res => {
                console.log(res.data);
                setList(res.data)
                console.log(PostList);
            })
    }

标签： javascriptreactjsuse-effectuse-state

Answer 1

为什么 usestate 不接受数据中的状态变化？附上我的代码：

因为您附加了一个空的依赖数组，useEffect如下所示：

useEffect(() => {
        retrievePosts()
    }, [])

如果你传递一个空的依赖数组，这个 useEffect 只会被调用一次。如果要useEffect在每次数据更改后运行，则必须将数据传递给依赖数组：

useEffect(() => {
            retrievePosts()
        }, [data /*i.e PostList*/])

但是，请注意不要无限次地重新渲染组件。您可以检查React-Query和SWR等库

还有一件事：

我可以从 API 调用中获取数据，但是当我尝试将状态更改为对象数组并控制台记录它时，我得到未定义。

setState是一个异步调用。您无法在调用后立即记录数据setData。看看这篇文章或这个问题，看看他们是否有帮助