Блог

Главная - Вопросы по программированию - Обновление состояния реакции зависит от другого состояния с помощью крючков

Обновление состояния реакции зависит от другого состояния с помощью крючков

#reactjs #react-hooks

Вопрос:

Я хочу обновить состояние, зависящее от другого изменения состояния. Например, у меня есть первое состояние, и если первое состояние изменится, я хочу изменить второе состояние в зависимости от изменений первого состояния. Каков наилучший способ сделать это? Я подготовил два примера.

Пример 1

Здесь я изменяю состояние 2 внутри обратного вызова изменения состояния состояния 1.

 const DependentStateExample1 = () => {
  const [state1, setState1] = useState(0);
  const [state2, setState2] = useState(0);

  const changeState1 = () => {
    setState1((prev) => {
      const newState = prev   5;
      setState2((prevState2) => prevState2   newState);
      return newState;
    });
  };

  return (
    <div>
      <span>{state1}</span><span>{state2}</span>
      <button onClick={changeState1}>Change State 1</button>
    </div>
  );
};

Пример 2

Здесь я использую useEffect, который будет выполняться каждый раз при изменении состояния 1.

 const DependentStateExample2 = () => {
  const [state1, setState1] = useState(0);
  const [state2, setState2] = useState(0);

  const changeState1 = () => {
    setState1((prev) => prev   5);
  };

  useEffect(() => setState2((prev) => prev   state1), [state1]);

  return (
    <div>
      <span>{state1}</span>
      <span>{state2}</span>
      <button onClick={changeState1}>Change State 1</button>
    </div>
  );
};

Оба способа дают мне один и тот же результат, но какой из них лучше, или есть лучший способ решить эту проблему? Может кто-нибудь, пожалуйста, объяснить?

Комментарии:

1. Существует ли какое-либо конкретное требование использовать 2 разных состояния? Почему нельзя использовать в одном штате?

2. Нет, нет никакой особой причины для использования 2 разных состояний. Использовать одно состояние на самом деле хорошая идея, тогда я могу использовать useReducer вместо useState. Но в любом случае, все еще возможно ли это сделать с 1 состоянием в каждом?

3. Есть какие-нибудь новости по этому поводу?

Ответ №1:

Давайте начнем с того факта, что вы знаете связь между первым состоянием и вторым, поэтому вместо того, чтобы записывать эту логическую зависимость в коде, вы могли бы убрать ее и просто написать код так, чтобы он давал тот же результат, но чтобы React не приходилось «ждать», пока setState завершится:

 setState1(oldState1 => oldState1   5);
setState2(oldState2 => oldState1   oldState2   5); // we know setState is async so remember on the second line you don't have yet setState1 completed

Этот принцип можно было бы распространить на более сложные зависимости между государствами.

Метки: