javascript - 为什么从 react 对象复制状态时必须将对象传播两次

Question

我在下面有这个对象，我想测试当我执行操作以更改 group 键的状态时，它会正确更新。正如您所看到的，该对象中有更多的键值对，而不仅仅是group，因此我想扩展initialState对象并编写我的测试，仅更改组值。

这是初始状态:

export const initialState = {
  testing: false,
  filters: {
    start: moment()
      .startOf("month")
      .format(),
    end: moment()
      .endOf("month")
      .format(),
    city: "",
    group: "daily"
  },
  locations: []
};

我的单元测试:

test("It performs the setGroup action correctly", () => {
    const active = "month";

    const action = setGroup(active);

    const state = reducer(
      {
        ...initialState,
        filters: {
          ...initialState.filters,
          group: "daily"
        }
      },
      action
    );

    expect(state).toEqual({
      ...initialState,
      filters: {
        ...initialState.filters,
        group: "month"
      }
    });
  });

这个测试有效，但是我想知道为什么我必须传播 initialstate 一次，然后在过滤器对象中再次传播 initialState.filters只是为了操纵月份。

在我看来，这应该可以正常工作:

const state = reducer(
      {
        ...initialState,
        filters: {
          group: "daily"
        }
      },
      action
    );

我的问题是为什么我需要添加行 initialState.filters 才能使此测试可行。请有人帮我理解吗？我做了研究，但找不到任何东西。

Answer 1

当您执行...initialState.filters时，您正在将filters对象传播到initialState上。您必须执行此操作，因为您刚刚在化简器中定义了一个新的 filters 对象，因此必须将您想要从旧版本中保留的值放入其中。

如果这一切看起来有点冗长，那么请查看 Immer，它允许您使用更传统的 API 来拥有不可变对象(immutable对象)

https://immerjs.github.io/immer/docs/introduction