将 object 数组添加到 setState

Question

我正在尝试在 state 系列中添加一个 object 数组。 使用此代码，useEffect function 陷入无限循环。 我该如何解决这个问题？ 如果不添加系列 const 作为参数，我会收到有关缺少依赖项的错误，并且代码只会在启动时运行。

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

const LineChart = () => {
  const [series, setSeries] = useState([]);

  useEffect(() => {
    const url = "http://localhost:4000";

    const fetchData = async () => {
      try {

        fetch(url, {
          method: "GET",
        })
          .then((response) => response.json())
          .then((data) => {
            let chartData = data.testRunSummaries
              .map(function (testrun) {
                return {
                  duration: testrun.endTime - testrun.startTime,
                  label: testrun.testSetName + "#" + testrun.userFacingId,
                  testrun: testrun.testRunId,
                  status: testrun.status,
                };
              });
            setSeries(chartData, ...series);
            console.log(series);

          });
      } catch (error) {
        console.log(error);
      }
    };
    fetchData();
  }, [series]);

  return (
   ...
  );
};

export default LineChart;

Answer 1

series在你的useEffect依赖数组中。 而你的useEffect正在改变series 。 所以很明显你会陷入无限循环。

您不需要将您的series设置为useEffect的依赖项。 由于您的useEffect只会在挂载时触发一次，因此您只需

setSeries(chartData);

如果你真的需要以前的series值，你应该使用

setSeries(series => [...chartData, ...series]);

此外，看到你的

setSeries(chartData, ...series);
console.log(series);

让我提醒您setState是异步的，这将无法记录您更新的 state :)