React Router 切换路由时如何将状态重置为初始值

因为searchedMovie是存储在全局MoviesContext中的共享状态，不会随组件卸载自动重置，你只需要在MoviePage组件挂载时主动调用context提供的状态修改方法重置即可，具体实现步骤如下：

• 第一步：确认MoviesContext已暴露状态修改方法
  你的context定义中需要同步导出修改searchedMovie的方法，参考示例：

// services/context.ts 中的context定义参考
import { createContext, useState } from 'react';

export const MoviesContext = createContext({
  searchedMovie: '',
  setSearchedMovie: (val: string) => {}
});

// 外层提供者组件逻辑
export const MoviesProvider = ({ children }) => {
  const [searchedMovie, setSearchedMovie] = useState('');
  return (
    <MoviesContext.Provider value={{ searchedMovie, setSearchedMovie }}>
      {children}
    </MoviesContext.Provider>
  )
}

• 第二步：在MoviePage中新增挂载重置逻辑
  通过useEffect监听组件挂载行为，触发状态重置：

import { useContext, useEffect } from 'react';
import Topbar from '../Header/Topbar';
import MovieContent from '../Pages/MovieContent';
import Catalog from '../Catalog/Catalog';
import { MoviesContext } from "../../services/context";
import './Pages.scss';

const MoviePage = (props: any) => {
  const { searchedMovie, setSearchedMovie } = useContext(MoviesContext);

  // 路由进入当前组件时，重置搜索状态为初始值
  useEffect(() => {
    setSearchedMovie('');
    // 若存在路由复用组件的场景（比如同路由不同参数），可引入react-router的useLocation，将pathname加入依赖数组
  }, []);

  return (
    <>
      <Topbar />
      {searchedMovie === '' ? <MovieContent /> : <Catalog />}
    </>
  );
}

export default MoviePage;

如果你的业务场景需要在离开其他路由时就重置状态，也可以把useEffect的重置逻辑写在对应路由组件的卸载清理函数中即可。

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