时间戳

首页 > 解决方案 > 等待使用 .push 填充数组？

reactjs - 等待使用 .push 填充数组？

问题描述

我正在获取一个 api 并将结果推送到一个空数组，但我需要填充数组以显示数组中的信息。我得到“无法读取未定义的高属性”，我假设是因为在渲染之前未填充数组，如何在渲染页面之前等待 for 循环完成？

function TopStocks(props) {
 const symbols = ["AAPL", "NFLX", "GOOGL", "TSLA"];
  const stockInfo = [];


  useEffect(() => {
    fetchSymbols();
  }, []);



async function fetchSymbols() {
    for (let i = 0; i < symbols.length; i++) {
      await fetch(
        `api&symbol=${symbols[i]}`
      )
        .then((res) => res.json())
        .then((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 percentage = close - open;
            let result = parseFloat(percentage).toFixed(2);

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


return (<span className="header__grid-price">{stockInfo[0].high}</span>)
}

标签： reactjsuse-effect

解决方案

您正在对 进行简单的推送操作stockInfo，这不会触发重新渲染，为此，您必须更改它的状态，改用useState钩子，


import React, { useEffect, useState } from "react";

function TopStocks(props) {
  const symbols = ["AAPL", "NFLX", "GOOGL", "TSLA"];
  const [stockInfo, setStockInfo] = useState([]);

  useEffect(() => {
    fetchSymbols();
  }, []);

  async function fetchSymbols() {
    for (let i = 0; i < symbols.length; i++) {
      await fetch(`api&symbol=${symbols[i]}`)
        .then((res) => res.json())
        .then((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 percentage = close - open;
            let result = parseFloat(percentage).toFixed(2);

            let temp = [...stockInfo];
            temp.push({
              symbol: symbol,
              high: high,
              low: low,
              close: close,
              open: open,
              percentage: result
            });
            setStockInfo(temp);
          } catch {
            console.log("surpassed the limit of 4 requests in under a minute");
          }
        });
    }
  }

  return (
    <span className="header__grid-price">
      {stockInfo[0].high ? stockInfo[0].high : "loading"}
    </span>
  );
}

推荐阅读