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]);

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

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

Answer 1

您从效果返回的函数是 cleanup function，它将显示 auth.isChangePasswordSuccess 的上一个值。这是因为当 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>

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 的时间，在更改变量之前。

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

2 个答案: