Question

我已经阅读了在线和官方文档。订单是 Constructor-＆GT; ComponentWillMount - ＆gt;渲染 - ＆gt; ComponentDidMount等。

class Navigation extends Component {
    constructor(props) {
        super(props);
        console.log('constructor', this);
        this.state = { items: [ ] };
    }

componentDidMount() {
    console.log('componentDidMount');

    if ( toDisplay( ) ) {
        api.bringCats()
        .then( categories => {
            const tot_cat = categories.map( cat => { return {name: cat.name, link: cat.link}; })
            this.setState({items: tot_cat,})
        })
    }
}

render() { 
    console.log("render")
    //some stuff
}
}

我希望日志按此顺序排列构造函数 2. ComponentDidMount 3.渲染

在构造函数方法中使用this进行日志记录constructor。我能够获得items的价值，它在componentDidMount中为什么会发生这种情况？并且它以正确的顺序记录（constructor-＆gt; didmount-＆gt; render），但为什么即使在调用items之前我也会获得componentDidMount的值。

我在<Navigation/>

中使用<Header/>组件

Header extends Component{
render(){
  return (<div> <Navigation/> </div>);
}
}

Answer 1

我正在尝试一些事情，发现这个工作正常。

window.cnj = require('circular-json') / *我在起点第一行添加了这个，所以我可以在所有导入中访问它。 * /

window.props = JSON.parse(window.cnj.stringify(simple));

我可以从devtools访问window.props并按预期工作。

sample可以是字符串，数组，普通对象或循环对象。

首先叫哪一个？构造函数或componentDidMount或Render

1 个答案: