MobX 和 React 中 fetch 请求的问题

Question

我正在尝试从服务器下载数据并将其输出到控制台进行验证，但由于某种原因输出了未定义

MobX：

import { makeAutoObservable } from "mobx"

class Data {
    users
    constructor() {
        makeAutoObservable(this)
    }

    async fetchUsers() {
        try {
          const response = await fetch('https://dummyjson.com/users');
          const data = await response.json();
          this.users = data;
        } catch (error) {
          console.error("Error fetching data:", error);
        }
      }
}
const data = new Data()
export default data

反应：

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

const MyTable = observer( () => {

    useEffect(() => {
        data.fetchUsers()
      }, [])
    console.log(data.users)

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

export default MyTable;

我向控制台输出了一个数据对象，里面好像有数据，或者我不明白什么。

Answer 1

fetchUsers 是一个异步函数。您的 console.log 在获取用户之前正在运行。

在 data.fetchUsers 前面添加“await”并将控制台日志放入 useEffect 中，或者将 fetchUsers 视为承诺并将 console.log 放入“.then”延续中。

无论哪种方式，每次获取用户时，您都应该在控制台中看到您的使用情况。