如何調用API並在React中填充響應

Question

所以我想每次點擊刷新按鈕時調用google finance API，並且stocks.stock應該更新。到目前爲止，我已經寫了下面的代碼，現在我不知道如何繼續下去。

瀏覽器出現以下錯誤：未捕獲TypeError：e.currentTarget.data不是函數。

感謝

class App extends React.Component{ 
     constructor(){ 
       super(); 
       this.state = { 
        stocks:[ 
         {"ID":"1", "stock":"AAPL", "price": "$785.34", 
         "industry":"Tech"}, 
         {"ID":"2", "stock":"WMT", "price": "$68.75", 
         "industry":"Tech"}, 
         {"ID":"3", "stock":"AMZN", "price": "$810.45", 
         "industry":"Tech"}, 
         {"ID":"4", "stock":"FB", "price": "$95.34", 
         "industry":"Tech"}, 
        ], 
       }; 
      } 
    updateStock(e){ 
      var stock = (e.currentTarget).data('stock'); 
      var url=`https://www.google.com/finance/info?q=NASDAQ:${stock}`; 
       axios.get(url).then(response => { 
        var json = parser.parse(response.data); 
        let store = this.state.stocks; 
        store.price = json.l; 
        this.setState({ 
         stocks: store 
        }) 
       }); 
     } 
    render(){ 
      return (
        <table> 
         <thead> 
          <tr> 
           <th> ID</th> 
           <th> stock</th> 
           <th> price</th> 
           <th> industry</th> 
          </tr> 
         </thead> 
         <tbody> 
         { 
          this.state.stocks.map((stocks) => { 
           return (
             <tr> 
              <td>{stocks.ID}</td> 
              <td>{stocks.stock}</td> 
              <td>{stocks.price}</td> 
              <td>{stocks.industry}</td> 
              <td> <button onClick= 
                {this.updateStock} 
                data-stock= 
                {this.state.stocks.stock}> 
                refresh 
                </button> 
              </td>  
             </tr> 
            ); 
          }) 
         } 
         </tbody> 
        </table> 
       </div>   
      ); 
     } 
    } 

Answer 1

試試這個：

class App extends React.Component { 
    constructor(props){ 
    super(props) 
    this.state = { 
     stocks:[ 
     {"ID":"1", "stock":"AAPL", "price": "$785.34", 
     "industry":"Tech"}, 
     {"ID":"2", "stock":"WMT", "price": "$68.75", 
     "industry":"Tech"}, 
     {"ID":"3", "stock":"AMZN", "price": "$810.45", 
     "industry":"Tech"}, 
     {"ID":"4", "stock":"FB", "price": "$95.34", 
     "industry":"Tech"}, 
     ], 
    }; 
    } 

    updateStock(stock){ 
    // var stock = (e.currentTarget).data('stock'); 
    var url=`https://www.google.com/finance/info?q=NASDAQ:${stock}`; 
    axios.get(url).then(response => { 
     var json = parser.parse(response.data); 
     let store = this.state.stocks; 
     store.price = json.l; 
     this.setState({ 
      stocks: store 
     }) 
    }); 
    } 

    render(){ 
    return (
     <div> 
     <table> 
      <thead> 
       <tr> 
        <th> ID</th> 
        <th> stock</th> 
        <th> price</th> 
        <th> industry</th> 
       </tr> 
      </thead> 
      <tbody> 
      { 
       this.state.stocks.map((stocks, i) => { 
        return (
         <tr key={i}> 
          <td>{stocks.ID}</td> 
          <td>{stocks.stock}</td> 
          <td>{stocks.price}</td> 
          <td>{stocks.industry}</td> 
          <td> <button onClick={() => { 
          {this.updateStock(stocks.stock)} 
          }}>refresh</button> 
          </td> 
         </tr> 
        ); 
       }) 
      } 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 
} 

Answer 2

在這一行 var stock = (e.currentTarget).data('stock');

，以.data()呼叫應jQuery的元素上調用，你調用它(e.currentTarget)這是不一個jQuery元素。

Answer 3

將此行添加到您的的構造函數中（）：this.updateStock = this.updateStock.bind（this）;

constructor(props){ 
    super(props); 
    // ... 
    this.updateStock = this.updateStock.bind(this); 
}