Javascript 未在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>
    ); 
  }

导出默认类应用程序扩展组件{
建造师（道具）{
超级（）；
this.arr=this.generateTimelineArray（）；
this.state={el:'empty'}；
}
componentDidMount（）{
这是我的国家({
艾尔：这个。参考文献。艾尔
});
console.log（this.state.el）
}
render（）{
返回(
); 
}

我可以

console.log（this.refs.el）

并记录该值。但我必须将其保存到构造函数，以便将其传递给另一个组件

问题是状态并没有改变

我做错了什么

---

提前感谢

设置状态

是异步的。如果要查看更新的状态，请使用回调

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>
    ); 
  }

导出默认类应用程序扩展组件{
建造师（道具）{
超级（）；
this.arr=this.generateTimelineArray（）；
this.state={el:'empty'，flag:true}；
}
componentDidMount（）{
这是我的国家({
艾尔：这个，参考文献，艾尔，
旗帜：假
});
console.log（this.state.el）
}
render（）{
返回(
this.state.flag==false&&
); 
}

---

现在，只有在异步设置状态完成后，才会呈现该状态。

BTW为什么要将dom元素引用置于组件的状态？我需要获取div的偏移量。它的可能副本很好，但为什么我必须console.log（）为了设置状态，是否可以在不使用console.log的情况下进行回调？@Giedrius您不必进行日志记录。只是如果您想使用更新的状态，您需要使用回调。但这完全取决于您对新状态的具体操作。好的，那么最后一个问题，我如何将更新的状态作为道具传递给另一个组件？我是否也需要使用回调必须使用回调函数吗？而且构造函数中不能有元素引用。因为在呈现之前调用构造函数时。@YuryTarabanko，此问题存在多个重复项。请将它们标记为重复项，而不是回答它们