求助：为何出现undefined？如何用useEffect加载数据并存入useState渲染？

问题分析 #

你当前代码的核心问题：

• 直接用require导入带变量subcategory的路径，组件初始化时subcategory可能还未拿到有效值，导致加载失败返回undefined
• 没有用状态变量存储加载的数据，也没在useEffect里处理异步/动态数据加载逻辑

解决方案 #

按以下步骤修改代码，确保数据加载完成后再存入状态并渲染：

1. 定义状态变量存储数据
   用useState声明状态保存加载后的数据，初始值设为null，方便后续判断加载状态。

2. 在useEffect中动态加载数据
   使用ES模块的动态import()（替代同步的require）处理异步加载，同时加入错误捕获逻辑。把subcategory和router设为依赖项，确保值变化时重新加载数据。

3. 条件渲染避免undefined
   渲染前先判断数据是否存在，只有加载完成后再渲染内容，防止undefined报错。

完整代码示例 #

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router'; // 假设你使用Next.js路由

export default function YourComponent() {
  const router = useRouter();
  const { subcategory } = router.query; // 假设subcategory来自路由参数
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 确保subcategory存在再执行加载
    if (!subcategory) return;

    const loadData = async () => {
      setIsLoading(true);
      setError(null);
      try {
        // 动态导入数据文件
        const importedData = await import(`./data/${subcategory}`);
        // 若数据是默认导出，取importedData.default；否则直接取importedData
        setData(importedData.default || importedData);
      } catch (err) {
        setError('数据加载失败，请检查subcategory是否有效');
        console.error(err);
      } finally {
        setIsLoading(false);
      }
    };

    loadData();
  }, [subcategory, router]); // 依赖项变化时重新执行加载逻辑

  // 状态判断渲染
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>{error}</div>;
  if (!data) return <div>暂无数据</div>;

  // 数据加载完成后渲染内容
  return (
    <div>
      <h2>{data.title}</h2>
      <p>{data.description}</p>
      {/* 其他基于data的渲染内容 */}
    </div>
  );
}

关键注意事项 #

• 动态导入路径规则：import()的路径需要有固定前缀（比如./data/），打包工具才能提前识别需要打包的文件，不能完全用变量。
• 错误处理：必须加try/catch，避免无效的subcategory导致组件崩溃。
• 依赖项设置：依赖数组要包含subcategory和router，确保路由或分类变化时自动加载对应数据。

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