javascript - 使用 bool 值更新嵌套对象

Question

我有一个加载对象，每次加载都有 bool 值。我的状态是这样的:

state: {
  loading: {
    itemA: false,
    itemB: false,
    itemC: false
  }
}

我想使用 setLoading({ itemA: true }) 更新我的状态，但只更新 itemA，同时保持 itemB 和 itemC 与当前状态相同。

return {
  ...state,
  loading: {
    ...state.loading,
    itemA,
    itemB,
    itemC
  }
};

这是完整的 reducer (压缩):

setLoading: state => ({ itemA, itemB, itemC }) => {
    return {
      ...state,
      loading: {
        ...state.loading,
        itemA,
        itemB,
        itemC
      }
    };
  }

不幸的是，如果我 setLoading({ itemC: true })，A 和 B 现在未定义。

我如何确保它们不是未定义的，而是状态中的任何内容？

请注意——我试过只传递任何东西并进行对象分配或分散加载。

但是，为了提高可读性，我想知道我是否可以解构 props 而不必定义每个加载(我在这个页面上有 12 个单独加载的东西 - 一个仪表板)。

谢谢

Answer 1

使用Object.assign()

const state = {
  loading: {
    itemA: false,
    itemB: false,
    itemC: false
  }
}

Object.assign(state.loading, {itemA: true});

console.log(state.loading);