javascript - 如何将 React useState 钩子(Hook)解构到命名空间中？

Question

作为个人喜好，我将 React props 包装在命名空间中。它帮助我组织不同 Prop 的来源。

通过 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>
    </>
  );
}

是否有更简洁的状态设置语法？

我失败的尝试是

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

Answer 1

听起来像是您可以作为 custom hook 的一部分做的事情。例如

 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

在理论上，这应该给你你想要的，但我没有测试过，所以谨慎使用(例如，我什至不确定是否可以调用钩子(Hook)在迭代器内)。 - 这个 works fine .

尽管如此，您正在做的事情确实与 useReducer 类似。已经这样做了，也许值得尝试一下这个钩子(Hook)。