为什么我的组件没有在此待办事项列表应用程序中重新呈现？

Question

根据我对 mobx 的了解，可观察对象（任务列表）应该导致观察者（TaskList 组件）在更改时重新呈现。动作（将任务数据推入任务可观察状态）应该改变可观察状态，不是吗？当我在 taskList 中控制台记录数据时，我可以看到它。但是页面上实际上没有呈现任何内容，我怀疑这是因为我没有正确使用观察者/可观察对象。

我的代码：

interface Task {
  task: string;
}
export default observer(function TaskList() {
  const [update, setUpdate] = useState<string>('');
  const taskList = makeAutoObservable({ tasks: [] as Task[] });
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response: any = await axios.get('http://localhost:5000/data');
      action(() => {
        taskList.tasks.push(...response.data.recordset);
      })();
    } catch (error) {
      console.error(error);
    }
  };

  const onChangeValue = (e: any) => {
    setUpdate(e.target.value);
  };

  return (
    <div>
      <p>
        update input <input onChange={onChangeValue} value={update} />
      </p>
      {taskList.tasks.map((value: any, key) => {
        return (
          <div>
            <div>
              <p>
                {value.task}
                <DeleteTask value={value} taskList={taskList} />
                <UpdateTask
                  value={update}
                  current={value}
                  taskList={taskList}
                />
              </p>
            </div>
          </div>
        );
      })}
    </div>
  );
});

Answer 1

尝试这个

interface Task {
  task: string;
}
const TaskList = () => {
 ...
 ...
 ...
};

export default observer(TaskList);