设置状态擦除先前的对象值 React

Question

我正在尝试进行后续 API 调用以获取有关某些金融指数的信息。每次调用后，我想更新 de indexObject，以便它具有我存储的所有索引的所有数据索引数组。问题是，每次调用 setIndexObject 时它都会覆盖对象，即使我使用扩展运算符也会丢失以前的值。

 const [indexObject, setIndexObject] = useState({});

  const indexes = [
    "^GDAXI",
    "^BVSP",
    "^NDX",
    "^DJI",
    "^GSPC",
    "^IBEX",
    "^HSI",
    "^BSESN",
    "^FTSE",
  ];

  useEffect(() => {
    indexes.forEach((index) => {
      const options = {
        method: "GET",
        url:
          "https://apidojo-yahoo-finance-v1.p.rapidapi.com/stock/v2/get-summary",
        params: { symbol: `${index}`, region: "US" },
        headers: {
          "x-rapidapi-key":
            "----",
          "x-rapidapi-host": "apidojo-yahoo-finance-v1.p.rapidapi.com",
        },
      };

      axios
        .request(options)
        .then(function (response) {
          setIndexObject({
            ...indexObject,
            [index]: {
              value: response.data.price.regularMarketPrice.fmt,
              variation: response.data.price.regularMarketChangePercent.fmt,
            },
          });
        })
        .catch(function (error) {
          console.error(error);
        });
    });
  }, []);

这就是我想要实现的目标：

{
    A:{
      value:,
      variation:,
    },
    B:{
      value:,
      variation,
    }
  }

感谢您的帮助！

Answer 1

这里的问题是您在循环请求，而 setState 不是同步的。最好先填充所有数据，然后再设置状态。

const [indexObject, setIndexObject] = useState({});

const handleFetchData = async () => {
  const indexes = [
    "^GDAXI",
    "^BVSP",
    "^NDX",
    "^DJI",
    "^GSPC",
    "^IBEX",
    "^HSI",
    "^BSESN",
    "^FTSE",
  ];
  const resultData = {};

  for(const index of index) {
    const response = await axios.request(); // add your own request here
    
    resultData[index] = response;
  }

  return resultData;
}

useEffect(() => {
  handleFetchData().then(data => setIndexObject(data));
}, []);

为什么我使用 for of？因为 forEach 或 .map 无法等待异步循环。或者如果你想同时获取所有数据，你可以考虑使用Promise.all

设置状态擦除先前的对象值 React

Set State erasing previous object value React

setstate

reactjs