javascript - 如何优化 useReducer 中对象数组的更新？

Question

我有一个像这样的数据结构：

    const dataObj = {
    myparam: 'Hello', 
    data: [
      {
        id: 1, checked: false
      },
      {
        id: 2, checked: true
      }
    
      {
        id: 3, checked: false
      }
    ]
   }

useReducer因为我想更新我的arrayList，所以我一直在尝试，这样当我发送我的有效负载时，我可以将 id 为 1 的对象更改为选中/取消选中。

我通过这样做解决了这个问题：

const reducer = (state: StateType, action: Action) => {
  const { type, payload } = action;
  let newArrayChecked: Array<DataItems> = [];
  let newArrayUnchecked: Array<DataItems> = [];
  switch (type) {
    case ActionKind.Checked:
      newArrayChecked = state.items.map((item) => {
        const it = item;

        if (item.id === payload.id) it.checked = true;

        return it;
      });
      return {
        ...state,
        items: newArrayChecked,
      };

    case ActionKind.UnChecked:
      newArrayUnchecked = state.items.map((item) => {
        const it = item;

        if (item.id === payload.id) it.checked = false;

        return it;
      });
      return {
        ...state,
        items: newArrayUnchecked,
      };

    default:
      return state;
  }
};

我对此并不满意，因为对于初学者来说，它或多或少的重复代码看起来很丑。我想知道使用 useReducer 是否有更好的方法来做到这一点？我对这个 Hook 相当陌生，正在寻找代码优化。

标签： javascriptreactjsoptimization

Answer 1

您只需像这样更新：

case ActionKind.Checked:
  newArrayChecked = state.items.map((item) => {
    return {
      ...item,
      checked: item.id === payload.id ? true: item.checked
    };
  });
  return {
    ...state,
    items: newArrayChecked,
  };

case ActionKind.UnChecked:
  newArrayChecked = state.items.map((item) => {
    return {
      ...item,
      checked: iitem.id === payload.id ? false : item.checked
    };
  });
  return {
    ...state,
    items: newArrayUnchecked,
  };