Упростите несколько экземпляров useState - PullRequest
Новая
       6

Упростите несколько экземпляров useState

2 голосов
/ 01 апреля 2020

В моем коде 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("");

Ответы [ 3 ]

1 голос
/ 01 апреля 2020

Поскольку у вас нет сложных логик c для обновления состояния, лучшим подходом для вас будет использование объекта для хранения нескольких состояний. Чтобы упростить ваше решение, вы можете написать собственный хук, который объединяет состояние перед обновлением, чтобы вам не приходилось беспокоиться об этом при обновлении состояния 

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()});
1 голос
/ 01 апреля 2020

Вы можете просто использовать один объект состояния и деструктурировать его: 

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 });
1 голос
/ 01 апреля 2020

Более простые способы:

  1. useReducer в виде документов:

useReducer обычно предпочтительнее использовать состояние , когда у вас есть сложное состояние logi c, которое включает в себя несколько значений или когда следующее состояние зависит от предыдущего.

Управление одним состоянием: 
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 }));
...