使用useNavigate()重渲染同组件遇阻：如何触发全组件重渲染？

问题根源 #

你的目标组件中，cardLoaded 状态初始为 false，第一次获取数据后会被设为 true。后续即使 props.stateToPass 变化，由于 if (!cardLoaded) 的条件限制，fetchCardData 不会再次执行；同时组件内的 rerender 状态未与 props 同步，导致仅部分UI更新。

具体修改方案 #

1. 简化中间渲染组件

不需要额外维护 rerender 状态，直接将路由 state 传递给目标组件：

export const RenderTopMenuResultPage = (props) => {
  const { state } = useLocation();

  return (
    <>
      {createPortal(
        <CreateTopMenuResultPage stateToPass={state}/>,
        document.getElementById('result-page-sort-menu')
      )}
    </>
  );
};

2. 修改目标组件，确保props变化时触发重渲染和数据请求

export const CreateTopMenuResultPage = (props) => {
  console.log("prop from renderTopMenu:::", props.stateToPass); 
  const [cardLoaded, setCardLoaded] = useState(false);   
  const [rerender, setRerender] = useState(props.stateToPass);

  // 同步rerender状态与props变化
  useEffect(() => {
    setRerender(props.stateToPass);
    // props变化时重置加载状态，触发重新请求
    setCardLoaded(false);
  }, [props.stateToPass]);

  useEffect(() => {
    const fetchCardData = async () => {
      try {
        // 这里编写你的数据获取逻辑
        // 示例：const res = await fetch('/api/your-data');
        // const data = await res.json();
        
        // 获取成功后标记加载完成
        setCardLoaded(true);
      } catch (error) {     
        console.error('Error occurred while fetching data:', error);
        // 即使出错也要结束加载状态
        setCardLoaded(true);
        return { success: false };
      }
    }

    // 只要处于未加载状态，就执行数据请求
    if (!cardLoaded) {
      fetchCardData().catch((error) => {
        console.error('Error occurred while fetching data:', error);
      });
    }
  }, [cardLoaded]);

  if (!cardLoaded) {
    return <div>Loading...</div>; // 替换为你的加载UI
  }
  
  return (
    <>
      {/* 其他组件内容 */}
      <p>{rerender}</p>
    </>
  );
};

核心修改点 #

• 移除 cardLoaded 对重复请求的限制：通过在 props.stateToPass 变化时重置 cardLoaded 为 false，强制触发新一轮数据请求。
• 同步 rerender 状态与 props：确保UI显示最新的state值。
• 简化中间组件逻辑：减少不必要的状态维护，直接传递路由参数。

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