Используйте переменную состояния внутри метода в React

#javascript #reactjs #react-hooks

Вопрос:

Например, этот код:

 export const Test = () => {
  const [counter, setCounter] = useState(0);
  let number;

  const DivideByCounter = () => {
     number = 10 / counter;
  }

  const IncreaseCounter = () => {
      for(let i = 0; i < 5; i  ) {
         setCounter(counter   i);
  }
}

Это просто пример кода, над которым я работаю. Проблема здесь в том, что счетчик наборов правильно обновляет состояние, однако, когда я использую счетчик для деления, он возвращает мне Бесконечность. Когда я консолю.log(счетчик), он показывает мне 0, начальное состояние, однако, вне функции, он показывает мне обновленное состояние. Все ли знают, как я могу передать состояние обновления в функцию, чтобы она не возвращала мне Бесконечность? Заранее спасибо 🙂

1. Как вы звоните DivideByCounter , возможно ли, что вы делаете это до того, как государство завершит обновление? (Поскольку состояние настройки асинхронно)

2. используйте обратный вызов

Ответ №1:

Ваша проблема может быть связана с тем, что ваш звонок DivideByCounter до counter того, как будет обновлен. Просто добавьте в DivideByCounter это галочку, если counter === 0 потом number = 0 . Что-то вроде:

 export const Test = () => {
  const [counter, setCounter] = useState(0);
  let number;

  const DivideByCounter = () => {
     if (counter === 0) number = 0;
     else number = 10 / counter;
  }

  const IncreaseCounter = () => {
      for(let i = 0; i < 5; i  ) {
         setCounter(counter   i);
  }
}

Ответ №2:

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

Может быть, попробуйте добавить исключение для нуля, как в другом ответе, и добавьте эффект использования, содержащий код деления на счетчик, и добавьте счетчик в качестве зависимости

1. Я использую эффект использования, однако без каких-либо зависимостей. Исключение сработало, теперь оно возвращает мне ожидаемое значение, я попробую добавить счетчик в качестве зависимости

Ответ №3:

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

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

 const [counter, setCounter] = useState(0);
  let number;

  useEffect(() => {
    DivideByCounter();
    console.log(number);
  }, [counter]);

  const DivideByCounter = () => {
    number = 10 / counter;
  };

  const IncreaseCounter = () => {
    for (let i = 0; i < 5; i  ) {
      setCounter(counter   i);
    }
  };

вы можете поделиться тем, как вы пытались позвонить DivideByCounter ?