如何在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);
    });

现在我得到的是以下错误：

我正在努力找出为什么状态是空的，我如何甚至控制台日志它的值来调试问题。

Answer 1

更改声明状态的方式，这样就不会在第一次读取时出错。

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

setState参数is应该是一个新数据，而不是回调。

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]
  }
});