React UseEffect - 仅在数据更改时执行

React UseEffect - Executing only when data is changed

我知道传递给 useEffect 的函数在每个组件渲染时执行,我处于这样一种情况,我需要 useEffect 挂钩而不是 运行 在初始渲染时,但只有在渲染这些数据时才需要 => home.matchsPlayed, home.winHome

这是我的实际情况

  useEffect(() => {
    setData(prev =>
      prev.concat([
        {
          day: home.matchsPlayed,
          [selectedHomeName]: home.winHome
        }
      ])
    );
  },[home.matchsPlayed, home.winHome, selectedHomeName]);

  console.log('data', [data]);

数据数组如下所示

我看到了一个解决方案,我可以利用 useRef 通过 useEffect

跟踪 initialMount

所以我改成了

const isInitialMount = useRef(true);

  useEffect(() => {
    if (isInitialMount.current) {
       isInitialMount.current = undefined;
    } else {
      setData(prev =>
        prev.concat([
          {
            day: home.matchsPlayed,
            [selectedHomeName]: hhome.winHome
          }
        ])
      );
    }
  },[home.matchsPlayed, home.winHome, selectedHomeName]);

数组现在少了 1 个未定义的对象,稍微好一点

我希望我的 data array 是这样的,没有前 3 个未定义的对象,因为数据未在初始渲染中呈现。 如何实现?

  Data: [
    {day:22, Sao Paulo: -8},
    {day:16, Sao Paulo: -2},
    {day:27,  Sao Paulo: -9}
  ],

我在此处重现了案例 => https://codesandbox.io/s/cool-wind-sism9(为了查看演示,必须安装 chrome 扩展来解锁 CORS,我使用 CORS Unblock)

  useEffect(() => {
    if (!home.matchsPlayed || !home.totalCal || !selectedHomeName) {
      return;
    }

    setData(prev =>
      prev.concat([
        {
          day: home.matchsPlayed,
          [selectedHomeName]: home.totalCal
        }
      ])
    );
  },[home.matchsPlayed, home.totalCal, selectedHomeName]);

这样不行吗?