Reagieren - Überprüfen, ob Props vorhanden sind

Question

Ich suchte im Internet nach einer Antwort auf diese Frage, und ich habe keine gefunden. Daher stelle ich hier meine Frage.

Ich habe eine Elternkomponente (App) und eine Kindkomponente (Kind). Die App-Komponente einen Zustand mit einigen Daten enthält, etwa so:

class App extends Component { 
    constructor() { 
     super() 

     this.state = { 
      currentOrganization: { 
       name: 'name', 
       email: 'email' 
      } 
     } 
     render() { 
      return (
       <Child data={this.state.currentOrganization} /> 
      ) 
     } 
    } 
} 

In meinem Kinderkomponente, ich habe eine Form:

class Child extends Component { 
    constructor() { 
     super() 

     this.state = { 
      formData: { 
       name: '', 
       email: '', 
      } 
     } 
    } 

     render() { 
      return (
      <Form ... /> 
     ) 
     } 
    } 

Nach der docs Reaktion, sollen Formen haben in der Regel Ein Zustand, der Eigenschaften enthält, die jedem Element des Formulars entsprechen. Das Formular, das in meiner untergeordneten Komponente liegt, muss die Daten der aktuellen Organisation (wie in der App-Komponente zu sehen) in sich selbst vorbelegen.

Um dies zu erreichen, muss ich den Status des Kindes auf die Requisiten setzen, die es von seinem Elternteil erhält.

Wie überprüfe ich am besten, ob meine Child-Komponente die Requisiten erhalten hat, die sie benötigt, um ihren eigenen Status zu aktualisieren?

(Wenn jemand weiß ..) Was ist der Grund, warum das Team bei React keine Lebenszyklusfunktion wie componentDidReceiveProps() hinzugefügt?

Answer 1

Sie können die ursprünglichen Requisiten in constructor überprüfen.

class Child extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     formData: { 
     name: props.name || '', 
     email: props.email || '', 
     } 
    } 
    } 

    render() { 
    return (
     <Form ... /> 
    ) 
    } 
} 

P.S. props ist JS Objekt so Sie Eigenschaft überprüfen, wie diese "prop_name" in this.props // true|false