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 完成后呈现。