React中URL栏回车后父组件useEffect不触发问题排查与解决

核心问题排查 #

• 父组件Search的useEffect依赖数组仅包含dispatch，未关联路由的search参数：当直接输入URL回车（路由参数更新但组件未卸载重挂载）时，因为依赖项没变化，effect不会重新执行；而刷新页面是组件全新挂载，effect会执行一次。
• 子组件SearchResults参数接收错误：直接把props对象当成search参数使用，导致依赖判断失效。

具体修复代码 #

1. 修正父组件的useEffect依赖 #

将路由search参数加入依赖数组，确保路由参数变化时自动触发effect：

const Search = () => {
  const { search } = useLocation();

  useEffect(() => {
    sessionStorage.setItem('abc', true);
    dispatch(getConfig(localStorage.getItem('ID')))
      .then((res) => {
        // 原有业务逻辑
      }).catch((err) => {
        console.log(err);
      });
  }, [dispatch, search]); // 新增search到依赖列表
  
  return (
    <SearchResults search={search} />
  );
}

2. 修正子组件的参数解构 #

正确从props中解构出search参数，避免依赖判断异常：

// 错误写法：const SearchResults = (search) => {
const SearchResults = ({ search }) => { // 解构props获取search参数
  useEffect(() => {
    console.log(sessionStorage.getItem('abc'));
  }, [search]);
      
  return (
    // 原有渲染代码
  );
}

问题原理说明 #

• 刷新页面时，React会完全重新挂载Search组件，因此useEffect会在挂载阶段执行；
• 直接输入URL回车（单页应用内路由切换）时，Search组件并未卸载，仅路由的search参数更新，由于原代码中effect未监听该参数，所以不会触发执行。

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