useState обновляет значение состояния, но передает старое значение в качестве аргумента функции - PullRequest
Новая
       20

useState обновляет значение состояния, но передает старое значение в качестве аргумента функции

0 голосов
/ 03 июня 2019

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

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

Поскольку другой компонент, которыйполучает значение из хранилища по-прежнему работает нормально (но всегда переключается на противоположный путь) Я предполагаю, что это не проблема действия / редуктора.

useState инициализируется со значением false.при нажатии обновляет значение useState.Значение useState обновлено правильно.Затем значение передается в качестве аргумента для действия с избыточностью, которое вместо «истина» получает значение «ложь». 


export const UnconnectedMenuToggle: React.FC<INT.IToggleMenuProps> = ({
  getToggleMenuRequest }): JSX.Element => {

  const [isMenuOpen, setMenuOpen] = useState<boolean>(false);

  const btnAnimation = useSpring<INT.IAnimateToggle>({
    transform: isMenuOpen
      ? `translate3d(300px,0,0)`
      : `translate3d(0px,0,0)`
  });

  const imgAnimation = useSpring<INT.IAnimateToggle>({
    transform: isMenuOpen
      ? `rotate(0deg)`
      : `rotate(540deg)`
  });

  const makeBoolGlobal = (): void => {
    setMenuOpen(isMenuOpen => !isMenuOpen)
    getToggleMenuRequest(isMenuOpen)
  }

  return (
    <a.button
      data-test="button-toggle"
      className="menu-button"
      onClick={makeBoolGlobal}
      style={btnAnimation}
      type="button"
    >
      <a.img src={chevron}
        data-test="img-toggle"
        alt="Open Menu"
        style={imgAnimation}
      />
    </a.button>
  )
}

Нет сообщений об ошибках

1 Ответ

1 голос
/ 03 июня 2019

Поскольку новый метод ловушки setState не имеет обратных вызовов, вы должны использовать useEffect для создания функций после обновления состояния 

const [count, setCount] = useState(0)
useEffect(() => doSth(count))
...