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

【问题标题】：useState updates state value but is passing the old value as an argument to a functionuseState 更新状态值，但将旧值作为参数传递给函数
【发布时间】：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"
        alt="Open Menu"
        style={imgAnimation}
      />
    </a.button>
  )
}

没有错误信息

【问题讨论】：

标签： reactjs redux react-hooks

【解决方案1】：

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

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

【讨论】：

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