反應：無法將 useState 設置為對象數組。 控制台日志顯示未定義

Question

我正在使用 react 和 mongoose/mongo 數據庫。 在頁面加載時，我調用 API 並接收一組對象（它們是帶有標題、描述等的“帖子”）。 我正在嘗試對數據進行 map 以在單獨的卡上動態顯示發布信息。 我可以從 API 調用中獲取數據，但是當我嘗試將 state 更改為對象數組並控制台記錄它時，我得到了未定義。

附上代碼和結果的照片：

Info 的控制台日志

API調用的代碼（與圖1相關-請注意代碼行號）

為什么 usestate 不接受數據中 state 的變化？ 附上我的代碼：

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

Answer 1

為什么 usestate 不接受數據中 state 的變化？ 附上我的代碼：

因為您將一個空的依賴數組附加到useEffect ，如下所示：

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

如果你傳遞一個空的依賴數組，這個 useEffect 只會被調用一次。 如果要在每次數據更改后運行useEffect ，則必須將數據傳遞給依賴數組：

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

但是，請注意不要無限次地重新渲染組件。 您可以檢查React-Query和SWR等庫

還有一件事：

我可以從 API 調用中獲取數據，但是當我嘗試將 state 更改為對象數組並控制台記錄它時，我得到了未定義。

setState是一個異步調用。 調用setData后，您無法立即記錄數據。 看看這篇文章或這個問題，看看他們是否有幫助