render Kindkomponente bei der Rückkehr von Ajax Anruf in Eltern in reagieren

Question

Ich habe Probleme beim Rendern (und erneutes Rendern) einer Kindkomponente abhängig von Daten in der Eltern. Es gibt einen Ajax-Aufruf im Elternteil, um die Daten abzurufen, da der Ajax von einer anderen Kindkomponente aufgerufen werden muss.

class Parent extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      items: [] 
     } 
     changeAccount(){ 
      this.updateList(getParameters()); 
     } 
     updateList(args){ 
      let that = this; 
      // here is the ajax call 
      ajax({.... 
       success: function(data){ 
        that.setState({items: data}) 
       } 
      }) 
     } 
    render() { 
     return (
      <SelectAccount changeAccount={this.changeAccount}/> 
      <Table items={this.state.items} getInitialItems={this.changeAccount}/> 
     ) 
    } 
} 

SelectAccount ist nicht super wichtig. Es ist eine Komponente, die über Auswahloptionen verfügt, um ein Konto zu ändern, das die Ajax-Methode der übergeordneten Komponente aufruft. Ich möchte in der Lage sein, die Table Komponente immer wieder zu rendern, wenn die Daten vom Server zurückgegeben werden.

Die Tabelle Komponente ist als solche:

classTable extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      items: this.props.items 
     }; 
    } 
    componentDidMount(){ 
     this.props.getInitialItems(); 
    } 
    render() { 
     let rows = []; 
     this.state.items.map((item, index) => { 
      rows.push(<Row item={item} key={item.key} />)}); 
     return (
      <div className="table-body">{rows}</div> 
     ) 
    } 

Der Nachteil ist auch hier, dass ich die Tabelle möchte zunächst mit einer leeren Array zu machen, und wenn sie angebracht ist, möchte ich die ajax nennen Methode im Elternteil, um die Daten zu füllen. Der gleiche Ajax-Aufruf wird ausgeführt, wenn ein Benutzer Konten ändert, also muss ich die items in Parent an die items in Table binden und es neu gerendert haben.

Also, Kind macht (Table), ruft die Ajax-Methode (updateList()) in Parent und '' passiert die items wieder auf Table' where its Elemente `aktualisiert werden.

Ich habe versucht, den Ajax-Aufruf in die Komponente Table, aber das schafft seine eigenen Probleme beim Aufruf dieser Methode aus einer Geschwisterkomponente.

Auf der Suche nach Vorschlägen - ich vermisse offensichtlich etwas. Vielen Dank.

Answer 1

Sie müssen den Status Table nicht mit Elementen vom übergeordneten Element festlegen, verwenden Sie einfach eine einfache Eigenschaft. Wenn sich der Parent Status ändert, werden Table Requisiten aktualisiert und die Komponente von React neu gerendert. Hier ein einfaches Beispiel: Der Ajax-Aufruf wird durch einen einfachen Variablensatz ersetzt, der durch einen Klick auf die Schaltfläche ausgelöst wird.

class Parent extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     items: [] 
 
    } 
 
    this.bind() 
 
    } 
 

 
    bind() { 
 
    this.updateList = this.updateList.bind(this) 
 
    } 
 

 
    updateList(args) { 
 
    // Update state with harcoded list of items 
 
    // this could be easily replaced by an Ajax call 
 
    this.setState({ 
 
     items: ['some', 'new', 'stuff'] 
 
    }) 
 
    } 
 
    
 
    // Render parent component, pass items list 
 
    // into Table's props 
 
    render() { 
 
    return (
 
     <div> 
 
     <button onClick={this.updateList}>AJAX</button> 
 
     <Table items={this.state.items} getInitialItems={this.changeAccount} /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
class Table extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    } 
 
    
 
    // Render table using this.props.items 
 
    // React will handle the component's re-rendering 
 
    // when state of Parent changes 
 
    render() { 
 
    let rows = []; 
 
    this.props.items.map((item, index) => { 
 
     rows.push(<li key={index}>{item}</li>) 
 
       }); 
 
     return (
 
     <div className="table-body">{rows}</div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<Parent />, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 2

Für den allgemeinen Fall, ich glaube, Sie Ihre Antwort finden Sie hier: http://andrewhfarmer.com/react-ajax-best-practices/ sie

Er listet Ihrem speziellen Fall als „1) Root-Komponente“, müssen Sie die ersten Elemente außerhalb Ihrer Eltern-Steuerelement erstellen und übergeben als Requisiten.