javascript - ReactJs:如何防止componentWillUpdate多次重渲染

我正在创建一个简单的Todo App，正在使用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
    });
  };

最佳答案

因此，让我们尝试了解为什么对服务器有很多调用。

创建componentDidMount时，您调用了displayData，然后调用了setState。调用setstate后，它将立即调用componentDidUpdate，该调用再次调用displayData，然后调用setState。然后循环继续进行（可能直到内存用完为止）。

您可以尝试以下课程：

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