Status wird nicht in ComponentDidMount festgelegt

Question

Ich möchte auf die Refs von der Renderfunktion zugreifen und es auf den Status festlegen.

Hier ist mein Code:

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

Ich kann console.log(this.refs.el) und der Wert protokolliert. Aber ich muss es im Konstruktor speichern, um es an eine andere Komponente zu übergeben.

Problem ist, dass der Zustand nicht geändert wird.

Was mache ich falsch?

Vielen Dank im Voraus

Answer 1

setState ist async. Docs. Wenn Sie den Status Rückruf für den Status verwenden möchten.

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

Answer 2

Wie Yury sagte, ist this.setState asynchron. Neben einer Callback-Funktion können Sie einen Booleschen Zustandsvariablen verwenden und überprüfen Sie, dass in machen:

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

Dies wird nun nur machen, wenn die asynchronen setState abgeschlossen haben.