useEffect() 链函数调用未获取更新的 redux 状态答案

【问题标题】：useEffect() chain function call not getting the updated redux stateuseEffect() 链函数调用未获取更新的 redux 状态
【发布时间】：2021-05-18 07:48:42
【问题描述】：

我有这个代码

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

在第一次加载屏幕时，'SHOWING LAYOUT' 出现在我的控制台上，其中 auth.isChangePasswordSuccess 的值为 false .但是当我将值 auth.isChangePasswordSuccess 更改为 true 时，会触发 useEffect() 在控制台中显示 'SHOWING LAYOUT 2'，但是auth.isChangePasswordSuccess 的值仍然是 false。

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

【问题讨论】：

你能发布 useSelector 部分吗？

标签： reactjs redux react-redux react-hooks use-effect

【解决方案1】：

您从效果返回的函数是cleanup function，并会显示auth.isChangePasswordSuccess 的previous 值。这是因为当auth.isChangePasswordSuccess 更改时，它将首先运行在其闭包中具有先前值的清理，然后运行在其闭包中具有当前值的效果。这是一个例子：

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>

【讨论】：

【解决方案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返回的函数在每次“重新运行”之前运行，所以这意味着控制台上显示的“SHOWING LAYOUT 2”是第一次创建的函数useEffect 在变量更改之前运行。

【讨论】：