タブのクリック時の反復値

Question

私はAxiosを使用するアプリを持っており、タブ上に配置したマップを使用して値（例：IDとwarehouseName）を描画します。今私がしたいのは、warehouseIDにloadBrandTotal()の状態を投稿し、私がマップに取得する値IDからです。

これまでのところ私のコードは、この

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)} 
 

 
})

事前のおかげでたくさんのようなものです。

Answer 1

私はあなたが何をしたいのかは100％確信していませんが、loadBrandTotal（）関数内でloadWarehouse（）関数で取得したデータを投稿したいのですか？もしそうなら、いつこの投稿をしたいのですか？ボタンをクリックしますか？

// 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> 
    )} 

：ここ

は、各リスト要素は、要素は、（変更のコードのコメントを参照してください）、それが掲載されますloadBrandTotal（）関数にマップfucntionに入ったID値を送信ボタンがある例です

その例では、map関数でレンダリングされたすべてのリスト要素に、ボタンがクリックされるとloadBrandTotal関数に独自のnameoObject IDが送信され、状態が設定されるボタンが含まれています。それはあなたがやろうとしているものなのでしょうか？