javascript - react : setState in componentDidMount not causing infinite loop

Question

我是 ReactJS 的新手。当我阅读 ReactJS 蓝图书时，作者指定了

"but take care to never run setState in here, as that will trigger an endless update loop."

所以，我创建了一个简单的组件，但我没有看到任何这样的无限循环发生。

'use strict';
import React from 'react';
import { render } from 'react-dom';
const App = React.createClass({
    displayName : "SG",
    getDefaultProps() {
        return {
            age : "24"
        }
    },
    getInitialState() {
        return {
            date : ""
        }
    },
    componentDidMount() {
        debugger;
        var d = new Date();
        this.setState({date: d.getMilliseconds().toString()});
    },
    render() {
        return (
            <section>
                <h1>Demo App</h1>
                <p>Name : {this.props.name}</p>
                <p>Age : {this.props.age}</p>
                <p>date : {this.state.date}</p>
            </section>
        );
    }
});
render (<App name='Gowtham S'/>, document.getElementById('container'));

我将调试器保留在 componentDidMount 中，但它只命中一次。我的代码有什么问题有人可以帮助我吗？

谢谢

Answer 1

他说的是componentDidUpdate , 不是 componentDidMount .

---

当您在 componentDidUpdate 中setState 时，后者会再次被调用，因为组件应该更新，这会导致无休止的递归。另一方面，componentDidMount 仅在初始渲染时调用。