javascript - 我们使用哪些钩子来更新和删除反应？

Question

我是 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吗？

标签： javascriptreactjsreact-hooks

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);
        }
      };
}