MobX与React中fetch请求获取数据返回undefined问题求助

问题原因 #

• 异步执行时序问题：组件首次渲染时，useEffect中的fetchUsers是异步函数，网络请求还未完成，data.users尚未被赋值，所以组件顶层的console.log(data.users)会输出undefined。
• 浏览器控制台的引用特性：控制台打印的对象是引用类型，当你展开查看时，浏览器会读取该对象的最新状态——此时网络请求已完成，users已被赋值，所以能看到数据，但首次打印的undefined是当时的真实值。
• 非响应式日志位置：尽管组件用observer包裹，但顶层的console.log不会在users更新时重新执行，只有组件的渲染内容会响应users变化重新渲染。

解决方法 #

方法1：利用组件响应式渲染打印 #

保留组件顶层的console.log，当users更新时，observer会触发组件重新渲染，此时日志会打印最新的data.users：

const MyTable = observer( () => {
    useEffect(() => {
        data.fetchUsers()
    }, [])
    
    // 每次组件渲染（含users更新时）都会打印最新值
    console.log(data.users)

    return ( 
        <div></div>
     );
})

方法2：等待异步请求完成后打印 #

修改useEffect，等待fetchUsers执行完毕后再打印，确保拿到已赋值的users：

useEffect(() => {
    const getUsers = async () => {
        await data.fetchUsers();
        console.log(data.users); // 请求完成后打印最新数据
    };
    getUsers();
}, []);

方法3：用MobX的autorun追踪数据变化 #

使用MobX的autorun监听users的变化，每次users更新时自动执行日志：

import { autorun } from 'mobx';
import { observer } from 'mobx-react-lite';
import React, { useEffect } from 'react';
import data from '../store/data.js';

const MyTable = observer( () => {
    useEffect(() => {
        data.fetchUsers();
        // 监听users变化，更新时自动打印
        const dispose = autorun(() => {
            console.log(data.users);
        });
        // 组件卸载时清理监听
        return dispose;
    }, [])

    return ( 
        <div></div>
     );
})

export default MyTable;

内容的提问来源于stack exchange，提问作者Yogurt