正如我在网上和官方文档中阅读的那样。顺序是 Constructor-> ComponentWillMount -> Render -> 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
}
}
我希望日志按此顺序 1. 构造函数 2. ComponentDidMount 3. 渲染
我this使用 constructor 内部构造函数方法进行日志记录。我能够获得价值，items因为componentDidMount …
const form = {
firstname: "",
lastname: "",
email: "",
password: "",
gender: "",
dob: "",
username: ""
};
export default class Login extends React.Component {
constructor (props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
}
}
handleSubmit (event) {
event.preventDefault();
api.signin(this.state)
}
handleChange (event, type) {
form[type] = event.target.value;
this.setState({
form
})
}
render() {
return (
<div>
<nav className="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a className="navbar-brand" href="#">ChatBox</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" …