Question

我是React的新手，我想问一下react中用于更新/删除的生命周期挂钩，因为当我在组件中删除时，直到刷新页面后它才会被删除，但是当我使用componentDidUpdate重新启动时-fetch数据，我的服务器一直保持刷新，这是我使用的错误吗？我在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);
        }
      };
}

我们在响应中用于更新和删除的挂钩？

1 个答案: