javascript - 我们在 React 中使用哪些钩子(Hook)来更新和删除？

Question

我是 React 新手，我想询问 React 中用于更新/删除的生命周期 Hook ，因为当我在组件中删除时，它不会被删除，直到我刷新页面，但是当我使用 componentDidUpdate 时> 为了重新获取数据，我的服务器一直在刷新，我使用这个是错误的吗？当我在 componentDidUpdate

上重新获取数据时，它起作用了

这是我的代码:

class App {
    state = {
        employee: []
      };

      async fetchData() {
        try {
          const { data } = await axios.get("http://localhost:4000/employee/list");
          this.setState({ employee: data });
        } catch (e) {
          if (e) {
            console.log(e);
          }
        }
      }

      componentDidMount() {
        this.fetchData();
      }

      componentDidUpdate() {
        this.fetchData();
      }

      delEmployee = async id => {
        const url = `http://localhost:4000/employee/delete/${id}`;
        try {
          const { data } = await axios.delete(url);
          this.setState(prev => {
            return {
              employee: [...this.state.employee.filter(el => el.id !== id)]
            };
          });
          console.log(data);
        } catch (e) {
          if (e) {
            console.log(e);
          }
        }
      };
}

所以我来这里是想问一下，使用 Hooks 进行更新哪个最好？我使用 componentDidUpdate 是否正确？

Answer 1

不，componentDidUpdate 中的 this.fetchData 调用 setState 时没有任何中断条件。这会导致你无限循环，如果你想使用componentDidUpdate添加一个条件

我会做这样的事情:

class App {
    state = {
        employee: []
      };

      async fetchData() {
        try {
          const { data } = await axios.get("http://localhost:4000/employee/list");
          this.setState({ employee: data });
        } catch (e) {
          if (e) {
            console.log(e);
          }
        }
      }

      componentDidMount() {
        this.fetchData();
      }

      delEmployee = async id => {
        const url = `http://localhost:4000/employee/delete/${id}`;

        try {
           await axios.delete(url);
           await this.fetchData();

        } catch(e) {
            console.log(e);
        }
      };
}