未在componentDidMount中设置state

Question

我想从渲染函数访问refs,并将其设置为状态.

这是我的代码:

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)和值记录.但我必须将它保存到构造函数以将其传递给另一个组件.

问题是国家没有改变.

我究竟做错了什么？

提前致谢

Answer 1

setState是异步的.文件.如果要查看更新的状态,请使用回调.

componentDidMount() {
        this.setState({
          el: this.refs.el
        }, () => console.log(this.state.el));
    }