useState 更新状态值但将旧值作为参数传递给函数

Question

使用 useState 挂钩更新组件的状态（我用它来切换带有 react-spring 的动画）并且我想将状态的值发送到 redux 存储以便我可以使用它在另一个组件上。

问题是虽然 useState 挂钩按预期工作，但它作为参数传递给获取分派的操作的值与状态相反。

因为从存储中获取值的其他组件仍然工作正常（但总是以相反的方式切换）我认为这不是 action/reducer 问题。

useState 初始化为 false。单击更新 useState 值。 useState 值已正确更新。然后将值作为参数传递给 redux 操作，该操作获取 false 而不是 true。


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>
  )
}

没有错误消息

Answer 1

由于新的钩子 setState 方法没有回调，您必须在状态更新后使用 useEffect 来创建函数

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

useState 更新状态值但将旧值作为参数传递给函数

useState updates state value but is passing the old value as an argument to a function

reactjs

redux

react-hooks