代码之家 › 专栏 › 技术社区 › Romaldowoho

在ReactJS中继续之前,等待函数返回值

async-await reactjs javascript

Romaldowoho · 技术社区 · 6 年前

我有两个功能:

getPrice(ticker),它进行API调用并返回股票价格
setStock(e),它应该设置getPrice返回后的状态

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

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

2 回复 | 直到 6 年前

devserkan 6 年前

你不是在回报你的承诺 getPrice 方法,你只是在调用它。您使用的是arrow函数,并且有一个需要显式返回的体块。所以,用这个:

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

或者删除body块并使用隐式返回。

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

vahissan 6 年前

你没有明确地从你的网站上退回任何东西 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;
  }
}