使用useEffect结合Mobx时组件无法渲染数据的问题求助

你的核心问题是组件没有订阅Mobx状态变化，导致testStore.list更新后React不会触发组件重渲染。热重载后能显示是因为重载时组件重新挂载，直接读取了已更新的状态，但正常流程下状态变更无法驱动视图更新。下面是具体修复步骤：

1. 给组件添加Mobx观察者包装 #

Mobx需要通过observer装饰器来让React组件订阅它使用的状态，状态变化时自动触发重渲染。你需要从mobx-react-lite（适配函数组件）导入observer并包裹你的组件。

2. 移除多余的autorun #

你当前在useEffect里嵌套autorun完全没必要——autorun是用来监听状态变化自动执行逻辑的，但你只需要在组件挂载时执行一次初始化请求，直接在useEffect里写异步逻辑即可，避免不必要的重复执行。

修改后的完整代码 #

TestPage.tsx #

import { observer } from "mobx-react-lite";
import React, { useEffect, useRef } from "react";
import { useStore } from "./store";

const TestPage: React.FC = observer(() => {
    const { testStore } = useStore();
    const isCancelled = useRef(false);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const data = await fetch('/api/dictionaries/sources?subject=MATH');
                const json = await data.json();

                if (!isCancelled.current) {
                    testStore.setList(json);
                }
            } catch (err) {
                console.error('请求失败:', err);
            }
        };

        fetchData();
        
        return () => {
            isCancelled.current = true;
        };
    }, [testStore]);

    return (
        <div>
            <h1>This is test list</h1>
            {testStore.list.map((i) => (
                <div key={i.id}>{i.id}: {i.name}</div>
            ))}
        </div>
    );
});

export default TestPage;

可选优化：修复test-store.ts的类型问题 #

把setList的参数类型从any改成Item[]，避免类型不安全：

import { makeAutoObservable } from "mobx";

export interface Item {
    id: string;
    name: string;
}

export default class TestStore {
    list: Item[];
 
    constructor() {
        this.list = [];
        makeAutoObservable(this);
    }

    setList = (list: Item[]) => {
        this.list = list; 
        console.log("In setList: ", this.list);
    }
}

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