объединяя useState ловушку в реагирующем компоненте

Question

Я недавно начал много использовать реакционные хуки.

Управление состоянием кажется мне более интуитивно понятным при использовании "React.useState".

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

Например, по мере того, как мое приложение для автомобильных запчастей прогрессировало, оно теперь выглядит так:

const [isShown, setIsShown] = React.useState(false);
const [idVal, setIdValue] = React.useState(false);
const [partNameVal, setPartNameValue] = React.useState(false);
const [engineEngineEngineTypeVal, setEngineEngineTypeValue] = React.useState(false);
const [displacementVal, setDisplacementValue] = React.useState(false);
const [makeVal, setMakeValue] = React.useState(false);
const [countryVal, setCountryValue] = React.useState(false);

const hide = () => setIsShown(false);

const show = (id, partName, engineEngineType, displacement, department, country) => {
    setIsShown(true);
    setIdValue(id);
    setPartNameValue(partName);
    setEngineTypeValue(engineEngineType);
    setDisplacementValue(displacement);
    setMakeValue(department);
    setCountryValue(country);
}

<p>ID:  {idVal}</p>
<p>PartName:  {partNameVal}</p>
<p>EngineType:  {engineEngineTypeVal}</p>
<p>Displacement:  {displacementVal}</p>
<p>Make:  {makeVal}</p>
<p>Country:  {countryVal}</p>

Мне было интересно если есть способ сделать это более читабельным, но все же быть очень интуитивным.

Спасибо!

Answer 1

Обычно вы хотите обработать отдельный объект или использовать useReducer, что-то вроде:

const INITIAL_CAR = {
  id: 0,
  part: "4xE3",
  country: "USA",
  // ... More entries
};

const CarApp = () => {
  const [car, setCar] = useState(INITIAL_CAR);
  const [isShown, setIsShown] = useState(false);

  const show = (carProps) => {
    setIsShown(true);
    setCar(carProps);
  };

  const { id, part, engine, displacement, make, county } = car;

  const updateCountry = (country) =>
    setCar((prevCar) => ({ ...prevCar, country }));

  const updateCarProperty = ({ property, value }) =>
    setCar((prevCar) => ({ ...prevCar, [property]: value }));

  return (
    <div>
      {isShown && (
        <>
          <p>ID: {id}</p>
          <p>PartName: {part}</p>
          <p>EngineType: {engine}</p>
          <p>Displacement: {displacement}</p>
          <p>Make: {make}</p>
          <p>Country: {country}</p>{" "}
        </>
      )}
      // use show, updateCountry, updateProperty etc.
    </div>
  );
};

Answer 2

Я бы сказал, что это относится к useReducer крючку.

https://reactjs.org/docs/hooks-reference.html#usereducer

const initialState = {
      isShown: false,
      idVal: 0,
      ....
};

function reducer(state, action) {
  switch (action.type) {
    case 'show':
      return {
        ...state,
        isShown: true,
        idVal: action.payload.idVal
      };
    case 'hide':
      return {
        ...state,
        isShown: false
      }
    ...
    default:
      throw new Error();
  }
}

const [state, dispatch] = useReducer(reducer, initialState);

dispatch({type: 'show', payload: { idVal: 1}})

Answer 3

То, как я обычно обрабатываю большую часть состояния в компоненте, использует один useState, таким образом, это просто большой объект.

Вот небольшой пример:

const [state, setState] = useState({
  num: 1,
  cars: ['volvo', 'mazda'],
  john: {name: 'John', last: 'Foo'}
})

И если вы хотите что-то изменить в этом, я обычно использую эту функцию

const onChange = (name, value) => {
  setState(prevState => ({...prevState, [name]: value}))
}

Это изменит ключ name на значение value. Это намного яснее в моих глазах.

Answer 4

Вы можете создать новый файл для извлечения всех ваших логи ловушек c из вашего компонента.

Позвоните, если, например, useHooks.js

export default () => {
const [isShown, setIsShown] = React.useState(false);
const [idVal, setIdValue] = React.useState(false);
const [partNameVal, setPartNameValue] = React.useState(false);
const [engineEngineEngineTypeVal, setEngineEngineTypeValue] = React.useState(false);
const [displacementVal, setDisplacementValue] = React.useState(false);
const [makeVal, setMakeValue] = React.useState(false);
const [countryVal, setCountryValue] = React.useState(false);

const hide = () => setIsShown(false);

const show = (id, partName, engineEngineType, displacement, department, country) => {
    setIsShown(true);
    setIdValue(id);
    setPartNameValue(partName);
    setEngineTypeValue(engineEngineType);
    setDisplacementValue(displacement);
    setMakeValue(department);
    setCountryValue(country);
}

return [isShown, idVal, partNameVal, engineEngineEngineTypeVal, displacementVal, 
makeVal, countryVal, show, hide];
}

Идея была здесь, чтобы поставить все ваши хуки логируются c в функции и возвращают значения, которые вам нужны внутри вашего JSX.

А в вашем компоненте импортируйте и используйте все свойства, экспортированные из useHooks

import useHooks from './useHooks';

const [isShown, idVal, partNameVal, engineEngineEngineTypeVal, displacementVal, 
makeVal, countryVal, show, hide] = useHooks();

Надеюсь, идея ясно