將 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 :)