reagieren js Anzeige von AJAX-Daten auf Funktionsaufruf durch Übergabe Parameter

Question

Ich versuche derzeit zu lernen reagieren durch den Bau einer einfachen App, die mit einem JSON-Array durch den Aufruf einer bestimmten API funktioniert. Ich würde dann gerne die Ergebnisse des Arrays in einem Listenelement anzeigen und wenn man auf eines der Listenelemente klickt, gibt es einen Parameter zurück und ruft eine API auf und zeigt Daten in einem anderen Teil der Seite an. Ich habe die API erfolgreich aufgerufen und zeige die korrekten Daten im Listeneintrag an, aber ich habe Mühe herauszufinden, wie die Daten nach dem Klick in einem anderen Teil der Seite angezeigt werden. So haben diese ich derzeit in meiner Seite:

<div class="col-lg-3 col-md-3"> 
     <div class="block-job-list" id="JobCardBlock"></div> 
    </div> 

    <div class="col-lg-9 col-md-9"> 
     <div class="block-job-list" id="JobDetailBlock"></div> 
    </div> 

    <script type="text/jsx"> 
    var JobCard = React.createClass({ 

     // get game info 
     loadGameData: function() { 
     document.getElementById("overlay").style.display = "block"; 
     var a_token = window.localStorage.getItem('access_token'); 
     $.ajax({ 
      type: 'GET', 
      url: this.props.source, 
      data: { 
       page: 1, 
      }, 
      dataType: "json", 
      beforeSend: function(xhr) { 
       xhr.setRequestHeader("Authorization", "Bearer " + a_token); 
      }, 
      success: function(data) { 
       $('#overlay').hide(); 
       this.setState({ 
        data: data.order_list.data 
       }); 
      }.bind(this), 
      error: function(xhr, status, err) { 
       $('#overlay').hide(); 
       console.error('#GET Error', status, err.toString()); 
      }.bind(this) 
     }); 
    }, 

    getInitialState: function() { 
     return { 
      data: [] 
     } 
    }, 

    componentDidMount: function() { 
     this.loadGameData(); 
    }, 

    render: function() { 
     return (< div className = "CurrentGame" > 
      < JobList data = { 
       this.state.data 
      } 
      /> < /div> 
     ); 
    } 
}); 

var JobList = React.createClass({ 
    displayData: function(e) { 
     var a_token = window.localStorage.getItem('access_token'); 
     $.ajax({ 
      type: 'POST', 
      url: 'http://zipship-beta.herokuapp.com/job_detail', 
      data: { 
       order_id: e, 
      }, 
      dataType: "json", 
      beforeSend: function(xhr) { 
       xhr.setRequestHeader("Authorization", "Bearer " + a_token); 
      }, 
      success: function(data) { 
       $('#overlay').hide(); 
       this.setState({ 
        data: data.order_list 
       }); 
       console.log(this.state.data); 
      }.bind(this), 
      error: function(xhr, status, err) { 
       $('#overlay').hide(); 
       console.error('#GET Error', status, err.toString()); 
      }.bind(this) 
     }); 
    }, 
    render: function() { 

     if (!this.props.data) { 
      return null; 
     } 
     return (
      <ul className="list-group"> 
      { 

       this.props.data.map(function(jobDetail, i) { 
        return <li className="list-group-item" key=jobDetail.id} onClick={()=>{this.displayData(jobDetail.id)}}> 

          </div> 
         </li> 
       },this) 
      } 
      </ul> 
     ); 
    } 
}); 
</script>  

Answer 1

Wenn Sie Aktionen der Jobliste zu machen suchen, um den Zustand der Jobkarte hier sind zwei Optionen ändern Sie sich anschauen sollten.

Am einfachsten erstellen Sie eine übergeordnete Reaktionsklasse wie JobInfo, die einfach als Container für diese beiden Elemente fungiert.

render: function() { 
<div> 
    <JobCard/> 
    <JobList/> 
</div> 
} 

Dann würde JobInfo den Status für diese beiden Objekte beibehalten. In Reagieren, wenn Sie Wege finden, um den Zustand zu reduzieren, ist es immer ein gutes Zeichen. Dann hätte das JobInfo-Objekt eine Funktion wie onListItemClick oder updateJobCard. Da Sie Ihre Ajax-Anfrage verwenden, um den Status zu aktualisieren, würde es zu dieser übergeordneten Klasse verschoben werden, da der Status hier lebt. Dann übergeben Sie diese Funktion einfach (als Prop) an das JobList-Objekt und verwenden dieses für Ihr onClick-Ereignis auf Ihren Listenelementen. Jetzt, da der Status des Elternelements vom OnClick-Ereignis geändert wird, wird die Statusänderung auf die JobList- und JobCard-Informationen übertragen.

Die andere Option, die Sie untersuchen können, ist ein externer Event-Handler. Diese Art von Methoden finden Sie in Flux-Strukturen. Die Idee Sie verwenden JQuery oder eine Ereignisbibliothek, um Ihr JobList-Objekt Auslöser ein Ereignis global, und haben Sie Ihr JobCard-Objekt abonniert zu diesem Ereignis.

Die zweite Option würde ich dagegen empfehlen. Für die meisten einfachen Fälle ist es völlig unnötig und diese Art von System zu implementieren.

TLDR; Zentralisieren Sie Ihren Status und übergeben Sie Statusänderungen als Requisiten.