useEffect()链函数调用没有得到更新的redux状态

Question

我有这样的代码

useEffect(() => {
console.log('SHOWING LAYOUT');
return () => {
if (!auth.isChangePasswordSuccess) {
console.log('SHOWING LAYOUT 2', auth.isChangePasswordSuccess);
dispatch(updateAuth('status', userStatus.LOGGED_IN));
}
}
}, [auth.isChangePasswordSuccess]);

在第一次加载屏幕时，' showinglayout '以授权出现在我的控制台上。isChangePasswordSuccess值为false。但是当我改变值auth。isChangePasswordSuccesstotrue， useEffect()被触发，在控制台中显示' showinglayout 2'，但是的值auth。isChangePasswordSuccess仍然false.

知道为什么redux状态的值在链函数调用中不受影响吗?我与另一个我的其他useEffect()确认值已经更改为true.

Answer 1

从效果返回的函数是清理函数，它将显示之前的auth.isChangePasswordSuccess的值。这是因为当auth.isChangePasswordSuccess发生变化时，它将首先运行具有前一个值的cleanup闭包，然后运行具有当前值的effect闭包。下面是一个例子:

const { useEffect } = React;
const Component = ({ auth }) => {
useEffect(() => {
console.log(
'current value in effect function:',
auth.isChangePasswordSuccess
);
//returning cleanup function
return () => {
console.log(
'auth.isChangePasswordSuccess changed, running cleanup'
);
console.log(
'previous value (value when the cleanup was CREATED)',
auth.isChangePasswordSuccess
);
};
}, [auth.isChangePasswordSuccess]);
return String(auth.isChangePasswordSuccess);
};
const App = () => {
const [auth, setAuth] = React.useState({
isChangePasswordSuccess: true,
});
return (
<div>
<button
onClick={() =>
setAuth((auth) => ({
...auth,
isChangePasswordSuccess: !auth.isChangePasswordSuccess,
}))
}
>
toggle isChangePasswordSuccess
</button>
<Component auth={auth} />
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

我认为你不能返回你的函数，你可以用一种不同的方式。

useEffect(() => {
console.log('SHOWING LAYOUT');
if (auth.isChangePasswordSuccess) {
console.log('SHOWING LAYOUT 2', auth.isChangePasswordSuccess);
dispatch(updateAuth('status', userStatus.LOGGED_IN));
}
}, [auth.isChangePasswordSuccess]);

让我知道这是否有效!

我认为useEffect返回的函数在每次"重新运行"之前运行。，所以这意味着"显示布局2"在控制台上显示的，是在第一次运行useEffect时创建的函数，在变量更改之前。