Javascript 简化useState的多个实例

在我的ReactJS代码中，我需要像这样将多个变量存储为单独的状态。有没有更简单的方法来创建它们？因为现在我反复使用useState函数

  const [dutyCode, setDutyCode] = useState("");
  const [startTime, handleStartTime] = useState(new Date());
  const [endTime, handleEndTime] = useState(new Date());
  const [activityType, setActivityType] = useState("");
  const [dutyType, setDutyType] = useState("");

更简单的方法：

正如文件所述：

当您有涉及多个子值的复杂状态逻辑时，或者当下一个状态依赖于前一个状态时，useReducer通常首选使用state

管理单个状态：

---

因为您没有任何复杂的逻辑来更新状态，所以更好的方法是使用一个对象来存储多个状态。为了简化您的解决方案，您可以编写一个自定义钩子，在更新之前合并状态，这样您就不必在更新状态时担心它

const useMergedState = (initialVal) => {
   const [value, setValue] = useState(initialVal);
   const setMergedValue = useCallback((updatedValue) => {
       setValue(prev => ({
          ...prev,
          ...updatedValue,
       }))
   }, []);
   return [value, setMergedValue] ;
}

像这样使用它

const [state, setState] = useMergedState({
  startTime: "",
  endTime: new Date(),
  dutyCode: "",
  dutyType: new Date(),
});

像这样更新

setState({startTime: new Date()});

---

您可以只使用一个状态对象并对其进行分解：

const [state, setState] = useState({
    dutyCode: "",
    startTime: new Date(),
    endTime: new Date(),
    activityType: "",
    dutyType: "",
});

const {
    dutyCode,
    startTime,
    endTime,
    activityType,
    dutyType,
} = state;

const updateState = (update) => setState({ ...state, ...update });

---

我没有复杂的状态逻辑。我查看了useReducer文档，如果我使用它，我需要创建减缩器、操作等。在解决方案中，我同样需要重复实现handle方法。但无论如何还是要感谢你。对我来说，这取决于状态更新的时间。如果您单独更新它们，我会保持原样，避免增加状态管理的复杂性。如果它们都一起更新，那么我会考虑使用下面一些答案中描述的方法。实际上这些变量是表单数据。每一个用于不同的表单输入。

const [state, setState] = useState({
    dutyCode: "",
    startTime: new Date(),
    endTime: new Date(),
    activityType: "",
    dutyType: "",
});

const {
    dutyCode,
    startTime,
    endTime,
    activityType,
    dutyType,
} = state;

const updateState = (update) => setState({ ...state, ...update });