未在 componentDidMount 中设置状态答案

【问题标题】：state is not being set in componentDidMount未在 componentDidMount 中设置状态
【发布时间】：2017-07-08 13:18:31
【问题描述】：

我想从渲染函数访问引用，并将其设置为状态。

这是我的代码：

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

问题是状态没有被改变。

我做错了什么？

提前致谢

【问题讨论】：

顺便说一句，为什么要将 dom 元素引用放入组件的状态？
我需要获取 div 的偏移量
this.setState doesn't update value的可能重复

标签： javascript reactjs state

【解决方案1】：

setState 是异步的。 Docs。如果您想查看更新的状态，请使用回调。

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

【讨论】：

很好，但是为什么我必须 console.log() 才能设置状态，是否可以在没有 console.log 的情况下进行回调？
@Giedrius 您不必登录。只是如果您想使用 updated 状态，您需要使用回调。但这完全取决于您想对新状态做什么
好的，最后一个问题，我如何将更新的状态作为道具传递给另一个组件？我是否还必须使用回调函数？
而且你不能在构造函数中有元素引用。因为在渲染之前调用构造函数时。
@YuryTarabanko，这个问题在 SO 上存在多个重复项。请将它们标记为重复而不是回答它们

【解决方案2】：

就像 Yury 说的，this.setState 是异步的。除了回调函数，您还可以使用布尔状态变量并在渲染中检查它：

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

【讨论】：