Ändern Sie den Status in der übergeordneten Komponente von child, übergeben Sie diesen Status als Eigenschaft und ändern Sie den Status in der untergeordneten Komponente

Question

Ich habe eine übergeordnete Komponente mit zwei untergeordneten Komponenten. Eine Schaltflächenklickaktion sollte die Statusmutterkomponente ändern und sich auf beide untergeordneten Komponenten auswirken.

Dies ist meine Stammkomponente:

export default class SearchView extends React.Component { 
    // attributes 
    state = { 
    loading: false 
    } 

    // 
    constructor(props){ 
    super(props) 
    } 

    // get list of items 
    getItems(){ 
    this.setState({loading:true}) 
    axios.get('/path_to_data').then(response => { 
     this.setState({items:response.data, loading: false}) 
    }).catch(err=>{console.log(err)}) 
    } 

    render(){ 
    return (
     <div> 
     <SearchForm 
      getItems={this.getItems.bind(this)} 
      loading={this.state.loading} 
     /> 
     { this.state.items ? <ItemCards items={this.state.items} /> : "No data"} 
     </div> 
    ) 
    }//render 

}//class 

Dies ist meine Komponente in den Fall, klicken Sie mit dabei:

export default class SearchForm extends React.Component { 
    // attributes 
    state = { 
    loading: this.props.loading 
    } 

    // render 
    render(){ 
    return (
     <Segment inverted color="yellow"> 
     <Grid columns="2"> 
      <Grid.Column> 
      </Grid.Column> 
      <Grid.Column> 
      <Button 
       loading={this.state.loading} 
       disabled={this.state.loading} 
       color="black" 
       onClick={this.props.getItems} 
      > 
       Search 
      </Button> 
      </Grid.Column> 
     </Grid> 
     </Segment> 
    ) 
    }//render 

}//class SearchForm 

und das ist andere Kind-Komponente:

export default class ItemCards extends React.Component { 

    // constructor 
    constructor(props){ 
    super(props) 
    } 
    // state 
    state = { 
    items: this.props.items 
    } 
    ... 

Das Problem ist, Wenn ich auf eine Schaltfläche klicke, würde ich diese Änderung im Statusobjekterwarten 10 Attribut würde geändert werden, und so würde die Eigenschaft in dieselbe untergeordnete Komponente übergeben werden, wo das Ereignis ausgelöst wurde. Und dann würde ich erwarten, dass diese Kindkomponente erkennt, dass der Elternstatus geändert wurde und auch diese Eigenschaft, und dann würde sie ihren eigenen Status ändern und die UI würde loading Attribut auf Element rendern, bis die Antwort kommt (wenn die Antwort kommt, wird das Laden entfernt) .

Warum funktioniert dieser Code nicht wie erwartet? Wie repariere ich es?

Answer 1

In diesem Beispiel sollte die Komponente <Button> keinen Status haben und stattdessen Requisiten verwenden.

So versuchen zu umschreiben:

<Button 
    loading={this.props.loading} 
    disabled={this.props.loading} 
    color="black" 
    onClick={this.props.getHotels}> 

Der Grund dafür ist, dass in reagieren, Sie sich nicht über Zustand von einer Komponente zur anderen. Staat ist etwas, das in einer einzelnen Komponente enthalten ist. Ein gutes Muster ist, dass die Elternkomponente den Status hält und über Requisiten mit Kindern kommuniziert.