如何在 React js 中將新項目與鈎子連接起來？

Question

我有以下結構：

我想要做的是用新數據更新指標：

  const [data, setData] = useState<any>({});
  getServerResourceUsage(serverId, intervalTime)
    .then(res => {
      setData((state: any) => ({
        ...res.data.data,
        metrics: {
          time_series: state.metrics.time_series.concat(res.data.data.metrics.time_series)
        }
      }));
    })
    .catch(error => {
      console.log(error.response)
    })
    .finally(() => {
      setLoading(false);
    });

現在我得到的是以下錯誤：

我正在努力找出為什么 state 是空的，我什至如何控制台記錄它的值來調試問題。

Answer 1

更改您聲明 state 的方式，因此它不會在第一次獲取時給您錯誤。

const [data, setData] = useState<any>({
    metrics: {
        time_series: []
    }
});

而 setState 參數應該是一個新數據而不是一個回調。

setData({
  ...res.data.data,
  metrics: {
    time_series: data.metrics.time_series.concat(res.data.data.metrics.time_series)
  }
});

或者您也可以傳播現有的 time_series：

setData({
  ...res.data.data,
  metrics: {
    time_series: [...data.metrics.time_series, ...res.data.data.metrics.time_series]
  }
});