我有一个待办事项列表应用程序，当组件呈现时，我试图从后端获取任务。但是，数据是重复的，我不明白为什么。可能是因为useEffect钩子被调用了两次吗？我怀疑是因为当可观察到的变化时，观察者重新呈现，所以它可能会被第二次调用，但这样不会变成一个无限循环吗？所以我不太明白。
TaskList.tsx:

const TaskList = () => {
  const [update, setUpdate] = useState<string>('');

  useEffect(() => {
    TaskStore.fetchTasks();
  }, []);

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

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

export default observer(TaskList);

taskStore.ts:

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');
      this.tasks.push(...response.data.recordset);
    } catch (error) {
      console.error(error);
    }
  };
  
}

export default new TaskStore();