时间戳

首页 > 解决方案 > 你如何将 React useState hook 解构为命名空间？

javascript - 你如何将 React useState hook 解构为命名空间？

问题描述

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

用useState钩子我正在这样做。 

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);
};

标签： javascriptreactjs

解决方案

听起来像是您可以作为自定义钩子的一部分做的事情，例如

 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

理论上，这应该给你你想要的，但我没有测试过所以谨慎使用（例如，我什至不确定是否可以在迭代器中调用钩子）。- 这很好用。

虽然，您所做的与useReducer已经做的非常相似，但可能值得尝试使用该钩子。

推荐阅读