React Funktionseinstellung Zustand nicht nach in Konstruktor

Question

aufgerufen wird Ich bin derzeit ein ReactJS Projekt zu machen, und ich bin der Begegnung folgendes Problem:

Jedes Mal, wenn ich versuche, die Funktion zu machen changeState() der staatlichen App ändern, indem er ruft in der Konstruktor tut dies nicht. Wenn ich jedoch versuche, es an einem anderen Ort aufzurufen, ändert sich der Zustand. Hier

ist der Code:

class App extends React.Component { 
    constructor(props) { 
     super(props) 
     this.state = { elems: [] } 
     this.changeState() // This doesn't work 
    } 

    changeState() { 
     this.setState({ 
      elems: ['new', 'elem'] 
     }) 
    } 

    render() { 
     return (
      <div> 
       { this.changeState() /* This works */ } 
       {this.state.elems} 
      </div> 
     ) 
    } 
} 

Vielen Dank im Voraus

Answer 1

Warum die Funktion aufrufen, wenn Sie nur den Zustand, in dem Konstruktor eingerichtet haben kann wie

class App extends React.Component { 
    constructor(props) { 
     super(props) 
     this.state = { elems: ['new', 'elem'] } 
    } 


    render() { 
     return (
      <div> 
       {/* This wont work since changeState will cause an infinite loop because setState triggers a render and render triggers a setState */} 
       {/* this.changeState() */ } 
       {this.state.elems} 
      </div> 
     ) 
    } 
} 

Answer 2

Die constructor bekommt aufgerufen, bevor die Komponente geladen und gerendert wird. Sie können den Status also direkt im Konstruktor festlegen. Siehe die React Component Lifecycle.

Dies ist, wie Sie Zustand in der constuctor werden Einstellung tun sollten:

constructor(props) { 
    super(props); 
    this.state = { elems: ['new', 'elem'] }; 
} 

Answer 3

Für alle vor dem gleichen Problem, die beste Lösung, die ich die Funktion in componentDidMount rief gefunden, die das Problem dadurch gelöst, beide nicht Aktualisierung des Zustands und der Endlosschleife, die beim Aufruf von render verursacht wurden.

Dank an alle, die geholfen haben, und besonderen Dank an beide Felix Kling und Mayank Shukla für die Probleme aufgezeigt und mir zu helfen, die Lösung zu finden;)