如何在 history.push in react router 之前更改 useState

Question

我正在尝试更改父容器中的状态 onClick 必须在history.push路由的下一个路由器上进行更改。但是，当我在单击时更改状态以及路由时，会发生路由，并且在再次新渲染之前不会显示更改。我该如何解决这个问题？我将粘贴一些代码

<OptionButton
style={{ marginTop: 22 }}
onClick={() => {
setAnimationClass('none');
history.push('information');
}}
>

我需要 setAnimationClass 发生在 history.push 之前

Answer 1

导航到'information'时是否仅将其设置为'none'？也许你可以利用useEffect((来做这个伎俩。如果您在其他任何位置更改 animationClass，则更明智的做法可能是创建另一个状态属性并在onClick中对其进行修改，并在useEffect中侦听这些更改

useEffect(() => {
if (animationClass === 'none') {
history.push('information');
}
}, [animationClass]);

Answer 2

来自 React 文档：

setState(( 不会立即改变 this.state，但会创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。

无法保证对 setState 的调用的同步操作，并且可以对调用进行批处理以提高性能。

如果你希望某些事情只在 setState 之后发生，反应文档提供了一个解决方案 - 使用 setState 回调或 componentDidUpdate 方法。

如果你使用的是钩子，那么可以使用useEffect。例：

const [animationClass, setAnimationClass] = useState()
const onClick = () => {
setAnimationClass('none')
}
useEffect(() => {
if(animationClass ==='none') history.push('information')
}, [animationClass])