时间戳

首页 > 解决方案 > 如果不返回承诺，我如何等待状态设置？

reactjs - 如果不返回承诺，我如何等待状态设置？

问题描述

我正在尝试将状态设置为我的 setStockInfo 挂钩，并在运行 props.onInitialSet() 之前等待它被设置。我尝试将 setStockInfo 作为 useEffect 中的依赖项传递，但没有运气。在设置到全球商店之前，我需要来自 stockInfo 的信息。有没有办法可以使用回调，因为 useState 不返回承诺？从 props.initialSet() 返回的错误是“无法读取未定义的属性符号”

function TopStocks(props) {
const [stockInfo, setStockInfo] = useState([]);

const symbols = ["AAPL", "NFLX", "GOOGL", "TSLA"];
let temp = [];


 useEffect(() => {
    fetchSymbols();
    props.onInitialSet(
      stockInfo[2].symbol,
      stockInfo[2].percentage,
      stockInfo[2].close
    );
  }, [setStockInfo]);



async function fetchSymbols() {
    for (let i = 0; i < symbols.length; i++) {
      await fetch(
        `api${symbols[i]}`
      )
        .then((res) => res.json())
        .then((allStocks) => {
          console.log(allStocks);
          try {
            let metaDataEntries = allStocks["Meta Data"];
            let symbol = metaDataEntries["2. Symbol"].toUpperCase();
            let pastDataEntries = allStocks["Time Series (Daily)"];
            let pastDataValues = Object.values(pastDataEntries);
            let mostRecentValue = pastDataValues[0];
            let x = Object.values(mostRecentValue);
            let open = parseFloat(x[0]).toFixed(2);
            let high = parseFloat(x[1]).toFixed(2);
            let low = parseFloat(x[2]).toFixed(2);
            let close = parseFloat(x[3]).toFixed(2);
            let colorToSend;

            let percentage = close - open;
            if (percentage < 0) {
              colorToSend = "red";
            } else {
              colorToSend = "rgb(30, 216, 139)";
            }
            let result = parseFloat(percentage).toFixed(2);

            temp.push({
              symbol: symbol,
              high: high,
              low: low,
              close: close,
              open: open,
              percentage: result,
              color: colorToSend,
            });
          } catch {
            console.log("surpassed the limit of 4 requests in under a minute");
          }
        });
    }

    setStockInfo(temp);
  }


}


const mapDispatchToProps = (dispatch) => {
  return {

onInitialSet: (symbol, percentage, price) => {
      dispatch({
        type: "INITIALSET",
        value: {
          price: price,
          symbol: symbol,
          percentage: percentage,
        },
      });
    }



}

}

export default connect(mapStateToProps, mapDispatchToProps)(TopStocks);

标签： reactjsreduxreact-hooksuse-effect

解决方案

stockInfo是会改变的值，而不是状态设置器。在 中useEffect，检查数组是否已被填充：

// Run once, on mount:
useEffect(fetchSymbols, []);
// Run after fetchSymbols finishes:
useEffect(() => {
  if (stockInfo.length) {
    props.onInitialSet(
      stockInfo[2].symbol,
      stockInfo[2].percentage,
      stockInfo[2].close
    );
  }
}, [stockInfo]);

您还应该在try/catch周围放置一个 /await fetch以便您可以捕获可能的网络错误。

推荐阅读