使用Link跳转父组件时子组件useEffect不执行问题求助

在React项目中，通过react-router-dom为包含子组件的Messenger父组件配置了路由。当使用Link组件从其他页面跳转至Messenger时，子组件Conversation内的useEffect钩子完全不执行，导致初始state为空抛出错误。父组件传递的props能正常打印，但useEffect内的代码（含设置state的API调用）未触发。

相关代码 #

App组件 #

import { BrowserRouter, Routes, Route} from "react-router-dom";
import Signup from "./components/signup";
import Messenger from "./components/messenger";
import Login from "./components/login";

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Login/>}/>
        <Route path='/signup' element={<Signup />}/>
        <Route path='/messenger' element={<Messenger/>}/>
      </Routes>
    </>
  );
}

export default App;

Header组件（触发跳转） #

import { useEffect, useState, useRef } from 'react';
import {Link } from 'react-router-dom';
import SendIcon from '@mui/icons-material/Send';
import CircleIcon from '@mui/icons-material/Circle';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';

const Header = ({pfp}) => {
    return ( 
        <div className='header'>
            <div className='headerleft'>
                <img src={logo} className='logo' alt="" />
            </div>
            <div className='headerright'>
                {ismsg && <span className={textval < 10 ? "countertexts" : "countertextsdouble"}  >8</span>}
                <Link to="/messenger"><SendIcon className='texts' fontSize='large' /></Link>
            </div>
        </div>
    );
}
 
export default Header;

父组件Messenger #

return (
    <>
        {conversations.map((c) => (
            <div key={c._id} onClick={() => { convohandler(c) }}>
                <Conversation conver={c} latestchat={latestchat} />
            </div>
        ))}
    </>
);
}

export default Messenger;

子组件Conversation #

import { useSelector } from "react-redux";
import { useEffect, useState} from "react";

const Conversation = ({conver,latestchat}) => {
    console.log(conver)    // 父组件传递的props能正常打印
    
    let [fre, setFre] = useState("");
    let [isnow, setIsnow] = useState(false);
  
    useEffect(() => {
        console.log("not working anymore");  // 该文本从未打印
        // 用于设置'fre' state的API调用
    },[]);
 
    return ( 
        <div className={ fre.blocked.includes("user") ?  "blocked"  : "unblocked" }>
            {/* 组件内容 */}
        </div>
    );
}
 
export default Conversation;

解决办法 #

1. 修复useEffect依赖项 #

当前useEffect的依赖数组为空，仅在组件首次挂载时执行。若父组件的conversations是异步加载的，Conversation组件可能在conver props更新时无法触发useEffect。将conver添加到依赖数组，确保props变化时重新执行：

useEffect(() => {
    console.log("now working");
    // 执行API调用并设置fre state
}, [conver]); // 添加conver到依赖数组

2. 处理初始state的空值错误 #

组件渲染时，初始fre为空字符串，直接访问fre.blocked会抛出错误，导致组件渲染失败，useEffect无法执行。可以：

• 初始化fre为默认对象：

  let [fre, setFre] = useState({ blocked: [] });
  

• 或者在渲染时添加空值保护：

  return ( 
      <div className={ fre?.blocked?.includes("user") ?  "blocked"  : "unblocked" }>
          {/* 组件内容 */}
      </div>
  );
  

3. 检查父组件数据加载时机 #

确保Messenger组件的conversations数据在渲染前已正确加载。如果是异步获取数据，可在数据准备好前添加加载状态，避免渲染空数组导致的问题：

// Messenger组件内
if (!conversations) return <div>Loading...</div>;

return (
    <>
        {conversations.map((c) => (
            // ... 现有代码
        ))}
    </>
);

4. 验证组件key的唯一性 #

确保父组件中key={c._id}的_id是唯一值，避免React复用旧组件导致useEffect不触发。

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