React Redux疑问：为何dispatch会重置组件本地状态？

我正在开发ReactTS项目（v18.2），使用Redux Toolkit（v1.9.7）管理状态。遇到的问题是：向store中dispatch操作时，组件的本地状态会被重置。

比如Login组件中，填写表单后调用包含dispatch的handleLogin()时，email和password都会被重置为空字符串，且所有组件dispatch时都存在这个问题。

相关代码片段 #

Login组件 #

const Login = () => {
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');

  const dispatch = useAppDispatch();
  const { isAuthenticated, isSuccess, isError, message } = useAppSelector(
    (state) => state.auth
  );

  const navigate = useNavigate();

  const handleLogin = async () => {
    const userData = {
      email,
      password,
    };
    dispatch(login(userData));
  };

  useEffect(() => {
    if (isSuccess && isAuthenticated) {
      navigate('/');
    }
  }, [isSuccess, isAuthenticated]);

  useEffect(() => {
    if (isError) {
    }
  }, [isError]);
};

App组件核心代码 #

function App() {
  const dispatch = useAppDispatch();
  const { isAuthenticated, isLoading } = useAppSelector((state) => state.auth);
  const { isSuccess, isError } = useAppSelector((state) => state.user);
  const token = Cookies.get('service_token') || localStorage.getItem('token');

  // 问题根源：内部定义的组件
  function WithNav() {
    return (
      <>
        <NavBar isAuthenticated={isAuthenticated} authLoading={isLoading} />
        <Outlet />
        <Footer />
      </>
    );
  }

  function WithoutNav() {
    return <Outlet />;
  }

  // ...其他逻辑

  return (
    <ThemeProvider theme={theme}>
      <Routes>
        <Route element={<WithoutNav />}>
          <Route path='connexion' element={<Login />}></Route>
          {/* 其他路由 */}
        </Route>
        {/* 其他路由 */}
      </Routes>
    </ThemeProvider>
  );
}

核心问题出在App组件内部定义的WithNav和WithoutNav组件：
当你dispatch操作导致Redux状态变化时，App组件会触发重新渲染，此时这两个内部组件会被重新创建（每次渲染都是全新的组件类型）。React会判定这是完全不同的组件，因此会卸载之前的组件实例（包括Login）并重新挂载新实例，直接导致组件本地state被重置为空。

将WithNav和WithoutNav组件移到App组件外部，避免每次App渲染时重新定义它们：

// 移到App组件外部
function WithNav({ isAuthenticated, authLoading }: { isAuthenticated: boolean, authLoading: boolean }) {
  return (
    <>
      <NavBar isAuthenticated={isAuthenticated} authLoading={authLoading} />
      <Outlet />
      <Footer />
    </>
  );
}

function WithoutNav() {
  return <Outlet />;
}

function App() {
  const dispatch = useAppDispatch();
  const { isAuthenticated, isLoading } = useAppSelector((state) => state.auth);
  const { isSuccess, isError } = useAppSelector((state) => state.user);
  const token = Cookies.get('service_token') || localStorage.getItem('token');

  // ...其他逻辑

  return (
    <ThemeProvider theme={theme}>
      <Routes>
        <Route element={<WithoutNav />}>
          <Route path='connexion' element={<Login />}></Route>
          {/* 其他路由 */}
        </Route>
        <Route element={<WithNav isAuthenticated={isAuthenticated} authLoading={isLoading} />}>
          <Route index element={<Home />}></Route>
        </Route>
      </Routes>
    </ThemeProvider>
  );
}

如果因特殊需求必须在App内部定义组件，可以用useCallback包裹渲染逻辑，但更推荐第一种方案，代码结构更清晰且避免不必要的复杂度。

确保Login组件的表单元素正确绑定state值，示例如下：

<input
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>
<input
  type="password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

（虽然你未提交这部分代码，但错误的绑定也可能导致state异常，不过根据问题描述，核心原因仍是组件重新挂载）

内容的提问来源于stack exchange，提问作者S1p