在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();
             }
        }

    }