亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

超過ReactJs componentDidMount 最大更新深度

超過ReactJs componentDidMount 最大更新深度

斯蒂芬大帝 2023-10-20 17:30:10
我理解這個錯誤,我的 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.              };   };
查看完整描述

3 回答

?
30秒到達戰場

TA貢獻1828條經驗 獲得超6個贊

在您的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.        

      };


查看完整回答
反對 回復 2023-10-20
?
青春有我

TA貢獻1784條經驗 獲得超8個贊

您應該在內部使用某種類型的條件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這種情況下始終有用的值。


查看完整回答
反對 回復 2023-10-20
?
婷婷同學_

TA貢獻1844條經驗 獲得超8個贊

改變


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。添加額外的檢查將有助于停止此循環。


查看完整回答
反對 回復 2023-10-20
  • 3 回答
  • 0 關注
  • 198 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號