Javascript 如何将React-useState钩子分解为命名空间？

作为个人偏好，我将React道具包装在名称空间中。它帮助我组织不同道具的来源

使用

useState

hook，我就可以做到这一点

function MyComponent() {
  const [todoCount, setTodoCount] = useState(100);
  const [doneCount, setDoneCount] = useState(0);
  const myState = {
    todoCount,
    setTodoCount,
    doneCount,
    setDoneCount
  };

  return (
    <>
      <Text>Todo {myState.todoCount}</Text>
      <Text>Done {myState.doneCount}</Text>
    </>
  );
}

---

听起来像是你可以做的事情

从理论上讲，这应该能满足您的需求，但我还没有测试过，所以请谨慎使用（例如，我甚至不确定是否可以在迭代器中调用钩子）这个

---

虽然，您正在做的与已经做的非常相似，但可能值得使用该钩子进行一些实验。

当您需要管理复杂状态时，是goto。它是一个钩子，除了初始状态外，还接受减速器功能。减速器由您编写，用于将某些“操作”映射到状态更改。您可以向reducer函数“分派”一个操作，以根据指定的规则更新状态

useState

自身内部调用

useReducer

/*action={type:string，payload:any-type}*/
函数缩减器（状态，{type，payload}）{
开关（类型）{
“待办事项”案例：
返回{doneCount:state.doneCount+1，todoCount:state.todoCount-1}
案例“撤消待办事项”：
返回{doneCount:state.doneCount-1，todoCount:state.todoCount+1}
违约：
返回状态
}
}
函数App（）{
const[state，dispatch]=useReducer（reducer，{todoCount:100，doneCount:0}）
返回(
Todo{state.todoCount}
完成{state.donecoount}
分派（{type:'do todo'}）}>do todo
);
}

---

您可以使用多个缩减器映射到多个名称空间。

您至少可以省略

：count

和

：setCount

，但不确定它是否比这更简洁，尽管您可以内联第二行，例如

const myState={count，setCount}

。。。虽然我想你指的是一种在一条线上同时做这两件事的方法，定制钩子

useNamespaceState

（虽然我在这里没有得到任何东西）@CollinD我在第一节中确实做到了，但在第二节中没有。应该复制/粘贴。为什么不按原样使用数组呢？或者至少可以创建自己的钩子，将其转换为对象？@James Yeah。。。我希望有一行程序，这样我就可以启动

myState

名称空间中的所有状态。将示例更新为更复杂一点以显示此细节。这非常有效。非常感谢。

const myState = {
  [todoCount, setTodoCount]: useState(100),
  [doneCount, setDoneCount]: useState(0);
};

 function useMappedState(defaultState = {}) {
   const keys = Object.keys(defaultState);
   return keys.reduce((map, k) => {
     const fk = `set${k.charAt(0).toUpperCase()}${k.slice(1)}`;
     const [state, setState] = useState(defaultState[k]);
     map[k] = state;
     map[fk] = setState;
     return map;
   }, {});
 }
 ...
 const state = useMappedState({
   todoCount: 100,
   doneCount: 0
 });
 console.log(state.todoCount) // 100
 state.setTodoCount(5); // should set state of todoCount