简化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("");

1
投票

更简单的方法：

useReducer如文档所述：

useReducer 通常更可取为useState 当您具有涉及多个子值的复杂状态逻辑时或当下一个状态取决于上一个时。

管理单个状态：

useReducer

0
投票

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

const INITIAL = {
  startTime: "",
  endTime: new Date(),
  dutyCode: "",
  dutyType: new Date(),
};

// Some multi-keyed state
const [state, setState] = useState(INITIAL);

// Example for handling sub-value
const handleDutyCode = (dutyCode) =>
  useState((prev) => ({ ...prev, dutyCode }));
并像这样使用

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

JAVA c c++go swift javascript Nginx UI/UE 小程序 Python C#php asp

相关推荐