React Router - 切换路由时重置状态答案

【问题标题】：React Router - reset state when switching routeReact Router - 切换路由时重置状态
【发布时间】：2021-08-03 16:30:14
【问题描述】：

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

在这个组件中，我使用useContext() 来获取状态searchedMovie。我希望在第一次呈现 MoviePage 组件时将其设为默认值。但是，现在它的值是从父组件传递的

import { useContext } 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 } = useContext(MoviesContext);

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

export default MoviePage;

【问题讨论】：

也许你应该包括你想要“修复”的相关代码，即你想要searchMovie值重置的MoviesContext代码，以及你的路由代码和逻辑。

标签： javascript reactjs react-router

【解决方案1】：

你需要为这个逻辑使用 React 的 useState 钩子，所以它在渲染组件时会有初始值：

const [ searchedMovie , setSearchedMovie ] = React.useState("");

否则，您必须像这样更改 react useEffect 挂钩中的状态：

React.useEffect(() => {
 // your logic to change the searchedMovie state
} , [] )

useEffect 挂钩将始终运行并在组件挂载或它的 props 或状态更改时更改状态。

【讨论】：