超过ReactJs componentDidMount 最大更新深度

Question

我理解这个错误，我的 componentDidUpdate 函数正在创建一个无限循环，我不知道如何修复它。我发现回溯显示了两个错误，但我不知道该怎么办。这是提交处理函数，它位于主（日志）组件中：

submitHandler = event => {          

    event.preventDefault();

    const {month, day, year} = this.state.data;

    this.setState({

       loading: true,

       error: false,

       errors: {},

       data: {

          ...this.state.data,

          foundation: `${month} ${day} de ${year}`

       }

    });

    fetch('http://127.0.0.1:8000/logup/',

       {

          method: 'post',

          headers: {'Content-Type': 'application/json'},

          body: JSON.stringify(this.state.data)

        }).then(response => {

            this.setState({ loading: false });

            if (response.ok) {

                console.log('redirect to social nets');

            } else {

                this.setState({ error: true });

            }

            return response.json();

        }).then(json => {

            if (this.state.error) {

                this.setState({errors: json}) // The traceback give me error right here

            } else {

                console.log(json);

            }

        });    

    };

我在该登录组件的渲染中也有许多输入组件，回溯也在这里显示错误。

state = {

    error: false

};

componentDidUpdate() {

      let bad = Object.keys(this.context.errors).includes(this.props.name);

      if (bad) {

         this.setState({ error: true }); // traceback give me error too.        

      };

   };

Answer 1

在您的componentDidUpdate状态中，按以下方式更新：this.setState({ error: true })您这样做的条件是：Object.keys(this.context.errors).includes(this.props.name)设置状态会导致组件重新渲染并更新，因此componentDidUpdate将再次运行。然而，当这种情况发生时，您的上述情况很可能仍然成立。因此，你将再次更新状态，React 不会短路状态更新，因为你每次都创建一个新对象。在这里拯救自己的一种简单方法是将您的条件更改为：      if (bad && !this.state.error) {         this.setState({ error: true }); // traceback give me error too.              };

Answer 2

您应该在内部使用某种类型的条件componentDidUpdate，以免触发状态更新。就像下面这样：componentDidUpdate(prevProps, prevState) {      let bad = Object.keys(this.context.errors).includes(this.props.name);      if (prevState.error !== this.state.error && bad) {         this.setState({ error: true }); // traceback give me error too.              };   };始终比较内部的 prevState 和 currentState 值，componentDidUpdate因为在大多数情况下这个条件就足够了。注意：开始使用之前，componentDidUpdate请参阅文档，因为它还提供了prevProps在prevState这种情况下始终有用的值。

Answer 3

改变if (bad) {    this.setState({ error: true }); // traceback give me error too.        };到if (bad && !this.state.error) {    this.setState({ error: true }); // traceback give me error too.        };setState在 of 内部使用componentDidUpdate将导致它重新渲染和调用componentDidUpdate。添加额外的检查将有助于停止此循环。