javascript - 在 ReactJS 中继续之前等到函数返回一个值

Question

我有两个功能:

• getPrice(ticker)，调用 API 并返回股票价格
• setStock(e) 设置 getPrice 返回后的状态

据我所知，如果我像在 getPrice() 之前在 setStock() 中所做的那样在函数调用之前放置“await”，则代码不应继续执行，直到 getPrice() 返回。显然，我没有完全理解它，因为现在它返回未定义。我该如何解决这个问题？

此外，getPrice(ticker) 函数接受股票代码作为参数，因此我可以将该函数用于不同的股票。这是进行 API 调用的好方法吗？

    getPrice = (ticker) => {
      axios.get(`https://api.iextrading.com/1.0/stock/${ticker}/price`)
       .then((res) => {
         const price = res.data;
         return price;
       }).catch((err) => {
           console.log(err);
         });

    }

    setStock = async (e) => {
      e.preventDefault();
      const ticker = e.target.elements.tickers.value;
      const quantity = e.target.elements.tickers_quant.value;
      const price = await this.getPrice(ticker);
      const stock = {
        ticker,
        price,
        quantity
      }
      this.setState({
        stocks: [...this.state.stocks,stock]
      });
    }

Answer 1

您没有专门从 getPrice 函数返回任何内容。这就是它返回 undefined 的原因。可以像下面那样修改该函数以使其工作。

getPrice = async (ticker) => {
  try {
    const res = await axios.get(`https://api.iextrading.com/1.0/stock/${ticker}/price`);
    const price = res.data;
    return price;
  } catch (err) {
    console.log(err);
    return null;
  }
}