Re-render tritt nicht auf, wenn Zustand

Question

ändert Ich habe folgende Komponente ...

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     register: false 
    } 

    } 
    handleClick(event) 
    { 
     console.log("link was clicked"); 
     this.setState({register: true}); 

    } 

    render(){ 


     return (

      <If condition={ this.state.register }> 
       <Then><Register /></Then> 
       <Else>{() => 
        <Index event={this.handleClick} /> 

       }</Else> 
      </If> 
     ); 
    } 
} 

module.exports = App; 

So handleClick meine Funktion aufgerufen wird, wenn ein Link geklickt wird, ändert dies den Staat zu wahren. Die <IF>-Anweisung bemerkt jedoch nicht, dass sich der Status geändert hat und bleibt somit gleich (nur der Index bleibt erhalten)

Ich möchte, dass <Register /> gerendert wird, wenn auf die Verknüpfung geklickt wird. Wenn also auf die Verknüpfung geklickt wird, ändert sich der Status in "true", und die IF-Anweisung erfasst dann diese Änderung und rendert die richtige Komponente.

Wie kann ich das tun? Wie kann ich die IF Anweisung erhalten, um die Zustandsänderung zu bemerken?

Answer 1

Nicht sicher, was <Index> ist oder was macht es mit event. Wenn es nur die Funktion aufruft, die als props.event übergeben wird, wird die handleClick-Funktion mit der falschen this-Referenz aufgerufen und setzt den Status für die richtige Komponente nicht.

Wenn Sie Babel verwenden mit Stufe-2 voreingestellten oder niedriger, können Sie Syntax verwenden this zu binden:

class App ... { 
    ... 
    handleClick = (event) => { ... } 
    ... 
} 

Ja, es ist ein Pfeil Funktion definiton, sondern direkt in class. Es wird bind die richtige this Referenz, so dass es herumgereicht werden kann und es wird diese Referenz richtig haben, wenn sie aufgerufen wird.

Alternativ können Sie bind direkt verwenden, wenn die Funktion, als event={this.handleClick.bind(this)} vorbei. Aber Vorsicht, dies erzeugt bei jedem Aufruf eine neue Funktion, die sich auf die Leistung auswirken kann, wenn sie oft aufgerufen wird. Es wird empfohlen, dass Sie diesen Ansatz nicht verwenden und die eslint-Konfiguration von airbnb wird dies als Fehler markieren. Ein besserer Ansatz wäre, einmal innerhalb des Konstruktors zu binden, wie this.handleClick= this.handleClick.bind(this).

Wenn Sie mehr wissen möchten, this Medium post umfasst 2 weitere Möglichkeiten zum Binden und erklärt alle 5 Optionen.

Answer 2

Sie können es durch folgenden Code tun,

return (
     { this.state.register ? <Register /> : <Index event={this.handleClick.bind(this)} /> } 
    );