当成功接收到结果时，React setState 从服务器返回空结果

Question

我有如下代码：

const [pageNumber, setPageNumber] = useState(1);
useEffect(() => {
    const readDashboardPosts = async () => {
        let limit = 4;
        try {
            const res = await axios.post( );
            setFriendPosts(res.data.posts);
            console.log('pos', res.data.posts);
        } catch (err) {
            console.error(err)
        }
    }
    readDashboardPosts();
    console.log('friend-posts from state: ', friendPosts);
}, [])

在第一次渲染时，我的 console.log 如下：

pos (4) [{…}, {…}, {…}, {…}]
friend-posts from state:  []

因此，我确实从服务器成功获得了结果，因为 'pos' 的 console.log 正在工作，但在我设置状态后，它无法正常工作，因为我得到空数组，尽管我使用的是异步等待。我也用 useCallback 尝试过，但没有成功。

Answer 1

首先，setState是异步的

其次，使用 React Devtools 查看状态是否设置成功转到组件并检查您的组件

或者尝试像这样使用 useEffect :

useEffect(()=>{
    console.log('friend-posts from state: ', friendPosts);


} ,[friendPosts])

当成功接收到结果时，React setState 从服务器返回空结果

React setState returning empty result from server, when the result gets received successfully

javascript

reactjs

mern

react-hooks