componentDidMount 中未设置状态
state is not being set in componentDidMount
我想从渲染函数访问引用,并将其设置为状态。
这是我的代码:
export default class App extends Component {
constructor(props) {
super();
this.arr = this.generateTimelineArray();
this.state = {el : 'empty'};
}
componentDidMount() {
this.setState({
el: this.refs.el
});
console.log(this.state.el)
}
render() {
return (
<div className="timeline__container--line" ref="el" ></div>
);
}
我可以 console.log(this.refs.el)
并且值已记录。但是我必须将它保存到构造函数才能将它传递给另一个组件。
问题是状态没有被改变。
我做错了什么?
提前致谢
setState
是异步的。 Docs。如果您想查看更新后的状态,请使用回调。
componentDidMount() {
this.setState({
el: this.refs.el
}, () => console.log(this.state.el));
}
正如 Yury 所说,this.setState
是异步的。除了回调函数,您还可以使用布尔状态变量并在 render:
中检查它
export default class App extends Component {
constructor(props) {
super();
this.arr = this.generateTimelineArray();
this.state = {el : 'empty', flag : true};
}
componentDidMount() {
this.setState({
el: this.refs.el,
flag : false
});
console.log(this.state.el)
}
render() {
return (
this.state.flag == false &&
<div className="timeline__container--line" ref="el" ></div>
);
}
这现在只会在异步 setState 完成后呈现。
我想从渲染函数访问引用,并将其设置为状态。
这是我的代码:
export default class App extends Component {
constructor(props) {
super();
this.arr = this.generateTimelineArray();
this.state = {el : 'empty'};
}
componentDidMount() {
this.setState({
el: this.refs.el
});
console.log(this.state.el)
}
render() {
return (
<div className="timeline__container--line" ref="el" ></div>
);
}
我可以 console.log(this.refs.el)
并且值已记录。但是我必须将它保存到构造函数才能将它传递给另一个组件。
问题是状态没有被改变。
我做错了什么?
提前致谢
setState
是异步的。 Docs。如果您想查看更新后的状态,请使用回调。
componentDidMount() {
this.setState({
el: this.refs.el
}, () => console.log(this.state.el));
}
正如 Yury 所说,this.setState
是异步的。除了回调函数,您还可以使用布尔状态变量并在 render:
export default class App extends Component {
constructor(props) {
super();
this.arr = this.generateTimelineArray();
this.state = {el : 'empty', flag : true};
}
componentDidMount() {
this.setState({
el: this.refs.el,
flag : false
});
console.log(this.state.el)
}
render() {
return (
this.state.flag == false &&
<div className="timeline__container--line" ref="el" ></div>
);
}
这现在只会在异步 setState 完成后呈现。