componentDidMountに状態が設定されていません

Question

レンダリング機能からの参照にアクセスして、その状態に設定します。私はconsole.log(this.refs.el)と値が記録されることができ

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

：

は、ここに私のコードです。しかし、別のコンポーネントに渡すためにコンストラクタに保存する必要があります。

問題は、状態が変更されていないことです。私が間違っているのは何

？事前に

おかげ

Answer 1

setStateは非同期です。 Docs。更新された状態のコールバックを使用したい場合

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

Answer 2

と同様に、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が完了するとこれが今だけレンダリングされます：別にコールバック関数から、あなたは、レンダリングのboolean状態変数を使用し、それをチェックすることができます。