在componentDidUpdate中調用函數。 錯誤：React限制了嵌套更新的數量

Question

當我從api響應對象獲取時：

timeLoad =  {
  date: "2019-07-07 12:38:08+00",
  pend: true
}

我要設定：

this.setState({
  time: this.props.timeLoad.second * 1000
})

---

當我從api響應對象獲取時：

timeLoad =  {
        date: null,
        pend: false
    }

我想調用函數start（）。

---

componentDidUpdate(previousProps, previousState) {
    if (previousProps.timeLoad !== this.timeLoad) {
        if(this.props.timeLoad && this.props.timeLoad.date && 
         this.props.timeLoad.second) {
            this.setState({
                time: this.props.timeLoad.second * 1000
            })
        } else {
            this.setState({
                time: 0
            })
        }
    }
}

上面的代碼可以工作，但是當我添加時：

if (this.props.timeLoad && !this.props.timeLoad.date && !this.props.timeLoad.pend) {
     this.start ();
}

我有錯誤：

未捕獲的恆定違反：超出最大更新深度。 當組件重復調用componentWillUpdate或componentDidUpdate內部的setState時，可能會發生這種情況。 React限制了嵌套更新的數量，以防止無限循環。

我該如何解決？

我嘗試與該屬性的值進行深度比較： (previousProps.timeLoad.second !== this.timeLoad.second)但是我(previousProps.timeLoad.second !== this.timeLoad.second)錯誤：

無法讀取null的屬性“ second”。

並非每個對象都具有'second'屬性或具有'null'屬性。

class Watch extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      timerOn: false,
      timerStart: 0,
      time: 0
    }
   }

    componentDidUpdate(previousProps, previousState) {
        if (previousProps.timeLoad !== this.timeLoad) {
            if(this.props.timeLoad && this.props.timeLoad.second && 
             this.props.timeLoad.second) {
                this.setState({
                    time: this.props.timeLoad.second * 1000
                })
            } else {
                this.setState({
                    time: 0
                })
            }
        }

        if(this.props.timeLoad  && !this.props.timeLoad.date && !this.props.timeLoad.pend){
            this.start();
        }
    }


    start = () => {
        this.setState({
            timerOn: true,
            time: this.state.time,
            timerStart: Date.now() - this.state.time
        });
        this.timer = setInterval(() => {
            this.setState({
                time: Date.now() - this.state.time
            });
        }, 10);

        const url = `https://app/api/v1/asset/{id}`

        axios({ 
            method: 'post', 
            url, 
            data: this.item, 
            headers: { Authorization: `Bearer ${token}` }, 
            }) 
            .then(res => { 
                this.setState({
                    startItem: res.data.item,
                })
            }).catch(err => { 
                console.log(err); 
            });
     };

        render() {
            return ( 
                <button className="play" onClick={this.start}>
                    Button
                </button>
            );
        }
 }

Answer 1

這是一個簡短的比較：

if (previousProps.timeLoad !== this.timeLoad)

始終會返回true （不同的對象）並每次都更新狀態，這就是導致無限循環的原因。 嘗試與該屬性的值進行深層比較：

if (previousProps.timeLoad.seconds !== this.timeLoad.seconds)

Answer 2

我解決了：

我不得不把

if(this.props.timeLoad  && !this.props.timeLoad.date && 
    !this.props.timeLoad.pend){
       this.start();
}

內部if (previousProps.timeLoad !== this.timeLoad) {}

 componentDidUpdate(previousProps, previousState) {
        if (previousProps.timeLoad !== this.timeLoad) {
            if(this.props.timeLoad && this.props.timeLoad.second && 
             this.props.timeLoad.second) {
                this.setState({
                    time: this.props.timeLoad.second * 1000
                })
            } else {
                this.setState({
                    time: 0
                })
            }

            if(this.props.timeLoad  && !this.props.timeLoad.date && 
              !this.props.timeLoad.pend){
                 this.start();
             }
        }

    }