Reaction -Render Werte onClick von Tabs

Question

Ich habe eine App, die Axios verwendet und die Werte (zB: ID und warehouseName) mit Hilfe von Map rendern, die ich auf Tabs lege. Jetzt möchte ich einen Zustand auf warehouseID bei loadBrandTotal() von der Wert-ID, die ich in der Karte bekomme.

Bisher ist mein Code wie folgt viel im Voraus

export default React.createClass({ 
 

 
    getInitialState(){ 
 
     return { 
 
      warehouseName: "" 
 
     } 
 
    }, 
 

 
    componentWillMount(){ 
 
     this.loadWarehouse(); 
 
     this.loadBrandTotal(); 
 
    }, 
 

 

 
    loadWarehouse(){ 
 
     var that = this 
 
     var url = api + 'retrieveWarehouseList'; 
 
     axios.post(url, 
 
      { 
 
       warehouseName : 'NONE' 
 
      }) 
 
     .then(function (response) { 
 
      console.log(response.data); 
 
      that.setState({ 
 
       warehouseList : response.data.retrieveWarehouseListResult 
 
      }); 
 
      }) 
 
     .catch(function (response) { 
 
      console.log(response); 
 
     }); 
 
    }, 
 

 
    loadBrandTotal(){ 
 
     var that = this 
 
     var url = api + 'retrieveTotalSalesPerBrand'; 
 
     axios.post(url, 
 
      { 
 
       warehouseID : "None" 
 
      }) 
 
     .then(function (response) { 
 
      console.log(response.data); 
 
      that.setState({ 
 
       totsalesperbrand : response.data.retrieveTotalSalesPerBrandResult 
 
      }); 
 
      }) 
 
     .catch(function (response) { 
 
      console.log(response); 
 
     }); 
 
    }, 
 

 
    render() { 
 
    var wareName = this.state.warehouseList; 
 
    return (
 
    \t <ul className="tabs tabs-transparent"> 
 
\t   {wareName.map(function(nameoObjects) { 
 
\t   return (
 
\t    <li className="tab"> 
 
\t     <a href="#test1" value={nameoObjects.ID} key={nameoObjects.ID}>{nameoObjects.warehouseName}</a> 
 
\t    </li> 
 
\t   ) 
 
\t   })} 
 
\t  </ul> 
 
    \t)} 
 

 
})

Dank.

Answer 1

Ich bin nicht 100% sicher, was Sie tun möchten, aber ist es das innerhalb der loadBrandTotal() - Funktion, die Sie Daten, die Sie in der LoadWarehouse() Funktion bekommen haben, veröffentlichen möchten? Und wenn ja, WANN willst du diesen Beitrag machen, wie er gerendert wurde? Auf einen Knopf klicken?

Hier ist ein Beispiel, in dem jedes Listenelement eine Schaltfläche hat, der den ID-Wert sendet das Element in der Karte fucntion zum loadBrandTotal() Funktion bekam, wo es geschrieben ist (Code Kommentare zu Änderungen sehen):

// Give the id as an argument to loadBrandTotal 
loadBrandTotal(id){ 
     var that = this 
     var url = api + 'retrieveTotalSalesPerBrand'; 
     axios.post(url, 
      { 
       // Post the ID 
       warehouseID : id 
      }) 
     .then(function (response) { 
      console.log(response.data); 
      that.setState({ 
       totsalesperbrand : response.data.retrieveTotalSalesPerBrandResult 
      }); 
      }) 
     .catch(function (response) { 
      console.log(response); 
     }); 
    }, 

    render() { 
    var wareName = this.state.warehouseList; 
    return (
     <ul className="tabs tabs-transparent"> 
      {wareName.map(function(nameoObjects) { 
       return (
       <li className="tab"> 
        <a href="#test1" value={nameoObjects.ID} key={nameoObjects.ID}>{nameoObjects.warehouseName}</a> 
        // When clicked, this button sends THIS list object's nameoObject ID to the loadBrandTotal function, where it's posted 
        <button onClick{() => this.loadBrandTotal(nameoObjects.ID)}>Post ID</button> 
       </li> 
      ) 
      })} 
     </ul> 
    )} 

In diesem Beispiel enthält also jedes Listenelement, das in der Kartenfunktion gerendert wird, eine Schaltfläche, die, wenn sie angeklickt wird, ihre eigene nameOObject-ID an die loadBrandTotal-Funktion sendet, wo sie gepostet und der Status gesetzt wird. Ist das die Art von Dingen, die du versuchst zu tun?