React网站组件仅修改App.tsx后渲染，刷新即消失问题排查

• 先查Home组件的数据获取逻辑：

  • 确保API请求放在useEffect里，且依赖项设置正确（比如空数组[]确保组件挂载时执行一次），避免刷新时没触发请求，只有热更新时才执行。示例代码：

    useEffect(() => {
      fetchMangaData();
    }, []);
    

  • 确认状态初始值是数组类型（比如const [mangaList, setMangaList] = useState<Manga[]>([])），别用null或undefined，不然映射数据时会直接报错导致组件不渲染。

• 检查错误处理：

  • 给API请求加try/catch捕获异常，刷新时请求失败（比如跨域、API返回格式错误）会导致状态没更新，热更新可能刚好请求成功。可以加个错误状态方便排查：

    const [error, setError] = useState<string | null>(null);
    async function fetchMangaData() {
      try {
        const res = await fetch('/your-api-url');
        const data = await res.json();
        setMangaList(data);
      } catch (err) {
        setError('数据加载失败');
        console.error(err);
      }
    }
    

  • 刷新页面时打开浏览器控制台，看有没有报错信息，这是最快定位问题的方式。

• 排查组件渲染条件：

  • 检查Home组件里有没有条件渲染逻辑，比如只有某个状态满足才渲染MangaClickable列表，刷新时该状态没正确初始化就会导致组件消失。
  • 确认MangaClickable组件接收的props是否完整，有没有因为props缺失或为undefined导致组件不渲染的情况。

• 试试关闭React Strict Mode：

  • 开发环境下Strict Mode会让useEffect执行两次，可能干扰数据获取逻辑，暂时关闭后看刷新是否正常，能快速排除这个因素。

• 考虑热更新的状态保留特性：

  • 热更新时React会保留组件状态，但刷新时状态完全重置。要确保数据获取逻辑是在组件挂载时触发，而不是依赖热更新保留的旧状态。

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