我们在 React 中使用哪些钩子进行更新和删除

Question

我是 React 的新手，我想询问 react 中的生命周期钩子以进行更新/删除，因为当我在我的组件中删除时，它不会删除，直到我刷新我的页面，但是当我使用 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

不，this.fetchData in componentDidUpdate 调用 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);
        }
      };
}