javascript - ReactJs : How to prevent componentWillUpdate from re-rendering multiple times

Question

我正在创建一个简单的Todo应用程序，我正在使用componentDidMount来显示数据库中的数据。但问题是，一旦我添加新数据，数据就会被存储，但除非刷新，否则它不会显示在页面上。

然后我遇到了componentDidUpdate。它工作完美，但它重新渲染多次，我的意思是它不断请求服务器检查新数据。我使用 Express 作为后端

谁能告诉我如何防止这种情况发生？或者有什么更好的解决办法吗？

这是当前代码:

  class Navbar extends Component {
  state = {
    userArray: [],
    username: "",
    email: ""
  };

  //Storing the Data

  addBtn = e => {
    e.preventDefault();

    var data = {
      username: this.state.username,
      email: this.state.email
    };

    fetch("/user", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data)
    })
      .then(response => {
        if (response.status >= 400) {
          throw new Error("Bad response from server");
        }
        return response.json();
      })
      .then(data => {
        console.log(data);
        if (data === "success") {
          console.log("Yay");
        }
      })
      .catch(err => {
        console.log(err);
      });
    console.log(this.state.userArray);
  };


  componentDidMount() {
    this.displayData();
  }

  componentWillUpdate() {
    this.displayData();
  }

//显示数据

  displayData() {
    fetch("/user")
      .then(data => data.json())
      .then(data => {
        this.setState({
          userArray: data
        });
      });
  }

  //Handling the input values

  logChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

Answer 1

那么，让我们尝试了解为什么有大量对服务器的调用。

创建 componentDidMount 时，您调用 displayData，然后调用 setState。一旦调用 setstate，它就会调用 componentDidUpdate，后者再次调用 displayData，然后调用 setState。循环继续(可能直到内存耗尽)。

你可以尝试这个类(class):

import React from 'react';

export default class Navbar extends React.Component {
    state = {
        userArray: [],
        username: '',
        email: ''
    };

    componentDidMount() {
        this.displayData();
    }

    addBtn = e => {
        e.preventDefault();

        var data = {
            username: this.state.username,
            email: this.state.email
        };

        fetch('/user', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
            .then(response => {
                if (response.status >= 400) {
                    throw new Error('Bad response from server');
                }
                return response.json();
            })
            .then(data => {
                console.log(data);
                if (data === 'success') {
                    this.displayData();
                }
            })
            .catch(err => {
                console.log(err);
            });
    };

    displayData() {
        fetch('/user')
            .then(data => data.json())
            .then(data => {
                this.setState({
                    userArray: data
                });
            });
    }
}

基本上，我所做的是在 componentDidUpdate 中删除了对 displayData 的调用，然后在 ApI 调用成功时调用 displayData