为何Mobx Action无法更新我的Todo列表组件？

你的核心问题是：AddTask组件提交任务后，没有更新TaskStore的状态，导致TaskList这个observer组件没有触发重新渲染。

问题根源 #

1. AddTask的handleSubmit仅完成了POST请求，但没有将新任务同步到TaskStore的tasks数组中，也没有触发重新拉取任务列表的操作。TaskStore的数据没变化，依赖它的observer组件自然不会更新。
2. AddTask不需要被包裹成observer，它本身不依赖TaskStore的状态，只是负责提交数据，之前尝试包裹后出现渲染问题是多余操作导致的。

具体修复步骤 #

1. 给TaskStore添加更新逻辑

可以选择两种方式适配不同后端返回场景：

修改后的taskStore：

interface Task {
  task: string;
}

class TaskStore {
  constructor() {
    makeAutoObservable(this);
  }
  tasks = [] as Task[];

  @action fetchTasks = async () => {
    try {
      const response: any = await axios.get('http://localhost:5000/test');
      // 用数组替换的方式确保Mobx能追踪到变化（比push更可靠）
      this.tasks = [...response.data.recordset];
    } catch (error) {
      console.error(error);
    }
  };

  // 新增：直接添加单条任务的action
  @action addTask = (newTask: Task) => {
    this.tasks.push(newTask);
  };
}

export default new TaskStore();

2. 修改AddTask的handleSubmit

根据后端返回情况选择对应实现：

场景一：后端POST后返回新创建的任务数据

export default function AddTask() {
  const [task, setTask] = useState('');
  const handleSubmit = async (event: any) => {
    event.preventDefault();
    try {
      const response = await axios.post('http://localhost:5000/test', { task });
      // 调用TaskStore的addTask添加新任务
      TaskStore.addTask(response.data);
      // 清空输入框
      setTask('');
    } catch (error: Error | any) {
      console.log(error);
    }
  };

  const onChange = (e: any) => {
    const value = e.target.value;
    setTask(value || ''); // 简化空值处理逻辑
  };

  return (
    <div className="task">
      <form onSubmit={handleSubmit}>
        <input type="text" name="task" value={task} onChange={onChange}></input>
        <br></br>
        <input type="submit" name="submit" value="Submit" />
      </form>
    </div>
  );
}

场景二：后端POST后不返回新任务，需重新拉取完整列表

export default function AddTask() {
  const [task, setTask] = useState('');
  const handleSubmit = async (event: any) => {
    event.preventDefault();
    try {
      await axios.post('http://localhost:5000/test', { task });
      // 重新拉取任务列表，更新TaskStore
      await TaskStore.fetchTasks();
      // 清空输入框
      setTask('');
    } catch (error: Error | any) {
      console.log(error);
    }
  };

  const onChange = (e: any) => {
    const value = e.target.value;
    setTask(value || '');
  };

  return (
    <div className="task">
      <form onSubmit={handleSubmit}>
        <input type="text" name="task" value={task} onChange={onChange}></input>
        <br></br>
        <input type="submit" name="submit" value="Submit" />
      </form>
    </div>
  );
}

3. 关键注意事项

• 不要给AddTask包裹observer，它不依赖TaskStore的响应式状态，包裹反而会引发不必要的渲染或错误。
• Mobx的makeAutoObservable已经自动将TaskStore内的方法处理为action，异步操作后的状态更新无需额外手动包裹action。

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