APIを呼び出してレスポンスを返す方法

Question

更新ボタンをクリックするたびにgoogle finance APIを呼び出すと、在庫が更新されるはずです。私はこれまでのところ以下のコードを書いており、今後どのように進めるべきか分かりません。

ブラウザで次のエラーが表示されます。未知の型エラー：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

はこれを試してみてください：この行var stock = (e.currentTarget).data('stock');で

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

を、.data()への呼び出しは、あなたがされていない(e.currentTarget)でそれを呼んでいる、jQueryの要素に呼び出されなければなりませんjQuery要素。

Answer 3

）（あなたのコンストラクタに次の行を追加します。this.updateStock = this.updateStock.bind（これを）。

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