Каков наилучший или наиболее эффективный метод удаления ключей при установке состояния с помощью ловушки React's useState? - PullRequest
Новая
       19

Каков наилучший или наиболее эффективный метод удаления ключей при установке состояния с помощью ловушки React's useState?

0 голосов
/ 30 апреля 2019

Наш проект охватывает новые функциональные компоненты React и интенсивно использует различные хуки, в том числе useState.

В отличие от setState() метода класса React, метод установки полностью возвращает useState () заменяет состояние вместо слияния .

Когда состояние является картой, и мне нужно удалить ключ, я клонирую существующее состояние, удаляю ключ, затем устанавливаюновое состояние (как показано ниже) 

[errors, setErrors] = useState({})
...
const onChange = (id, validate) => {
  const result = validate(val);
  if (!result.valid) {
    setErrors({
      ...errors,
      [fieldId]: result.message
    })
  }
  else {
    const newErrors = {...errors};
    delete newErrors[id];
    setErrors(newErrors);
  }

Есть ли лучшая альтернатива (лучше быть более эффективной и / или стандартной)?

1 Ответ

1 голос
/ 30 апреля 2019

Если вам нужно больше контроля при настройке состояния с помощью ловушек, посмотрите на useReducer ловушку .

Этот хук ведет себя как редуктор в редуксе - функция, которая получает текущее состояние и действие, и преобразует текущее состояние в соответствии с действием, чтобы создать новое состояние.

Пример (не тестировался): 

const reducer = (state, { type, payload }) => {
  switch(type) {
    case 'addError':
      return { ...state, ...payload };
    case 'removeError':
      const { [payload.id]: _, ...newState };
      return newState;
    default:
      return state;
  }
};

const [state, dispatch] = useReducer(reducer, {});
...
const onChange = (id, validate) => {
  const result = validate(val);
  if (!result.valid) {
    dispatch({ type: 'addError', payload: { [id]: result.message }})
  }
  else {
    dispatch({ type: 'removeError', payload: id })
  }
...