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

Posted 2023-02-19

【中文标题】useState 更新状态值，但将旧值作为参数传递给函数

【英文标题】：useState updates state value but is passing the old value as an argument to a function

【发布时间】：2019-10-19 06:25:07

【问题描述】：

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

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

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

useState 初始化为 false。 单击时更新 useState 值。 useState 值已正确更新。 然后将 value 作为参数传递给 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"
        
        style=imgAnimation
      />
    </a.button>
  )

没有错误信息

【参考方案1】：

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

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

【讨论】：

新的钩子接口有回调。

@Luke 是的。忘记了重新渲染后无法跟踪状态。明显的解决方案。非常感谢。