数据在 mobx 中不可见

Question

我有一个 React 应用程序。我正在使用 mobx 进行中央状态管理。

我安装了这两个软件包：

  "mobx": "^6.3.0",
    "mobx-react-lite": "^3.2.0",

我的文件如下所示：

  export default class ActivityStore {
    
        constructor() {
        makeAutoObservable(this);    
      }  

 loadActivities = async () => {
    this.loadingInitial = true;
    try {
      const activities = await agent.Activities.list();
      console.log(activities);
      activities.forEach((activity) => {
    
        activities.push(activity);
      });
      this.loadingInitial = false;
    } catch (error) {
      console.log(error);
      this.loadingInitial = false;
     
    }
  };
    
    }

app.tsx:

useEffect(() => {

    activityStore.loadActivities();

    },
   [activityStore]);

   <ActivityDashboard
          activities={activityStore.activities}         
        />

export default observer(App);

所以我看到了来自 API 调用的数据。在控制台中。

但是我在网络视图中看不到数据。

那么我必须改变什么？

谢谢

Answer 1

实际上您的商店中没有 activityStore.activities 属性，您可能错过了那部分！

export default class ActivityStore {
    // Add class property with some default value, array in this case
    activities = []
    // It is better to declare all properties beforehand, so delcare this one too
    loadingInitial = false

    constructor() {
        makeAutoObservable(this);
    }

    loadActivities = async () => {
        this.loadingInitial = true;
        try {
            const activities = await agent.Activities.list();

            // Assign fetched activities to class property right here
            this.activities = activities;

            this.loadingInitial = false;
        } catch (error) {
            this.loadingInitial = false;
        }
    };

}

数据在 mobx 中不可见

data is not visible with mobx

reactjs

mobx

mobx-react