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

Answer 2

您没有在您的getPrice方法中返回承诺，而只是在调用它。您正在使用箭头功能，并且有一个主体块，需要显式返回。因此，使用此：

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

或删除主体块并使用隐式返回。

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

等到函数返回值后再在ReactJS中继续进行

2 个答案: