如何调用 API 并在 React 中填充响应

Question

所以我想在每次点击刷新按钮时调用谷歌金融 API，stocks.stock 应该会更新。到目前为止，我已经编写了以下代码，现在我不知道如何进一步进行。

浏览器报错：Uncaught TypeError: e.currentTarget.data is not a function.

谢谢

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

将此行添加到您的 constructor() 中：this.updateStock = this.updateStock.bind(this);

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