如何用useEffect创建组件？解决cards无法加载的问题

核心问题 #

你代码里的cards是fetch回调内部的局部变量，组件return语句所在的作用域根本访问不到这个变量，自然渲染不出来。而且React组件的渲染逻辑要依赖状态/Props的变化，直接在异步回调里生成JSX并存储是不符合React状态管理逻辑的。

正确实现方式 #

把处理后的数据存在React状态里，然后在组件渲染阶段根据状态生成JSX，步骤如下：

1. 添加状态存储处理后的数据
   先声明状态保存从接口数据处理得到的roles数组，可选添加加载状态优化体验：

const [roles, setRoles] = useState([]);
const [isLoading, setIsLoading] = useState(true);

2. 修改useEffect中的数据处理逻辑
   在fetch回调里处理接口返回的data得到roles，用setRoles存入状态，同时处理加载状态和错误：

useEffect(() => {
  fetch('https://website')
    .then((res) => {
      if (!res.ok) throw new Error('请求失败');
      return res.json();
    })
    .then((data) => {
      // 替换成你从data生成roles的具体逻辑
      const processedRoles = data.xxx; // 示例：假设data里的某个字段是roles数据源
      setRoles(processedRoles);
    })
    .catch((err) => {
      console.error('数据加载出错:', err);
    })
    .finally(() => {
      setIsLoading(false); // 无论成功失败都结束加载状态
    });
}, []); // 空依赖数组：仅组件挂载时执行一次请求

3. 在渲染阶段生成JSX
   在return里根据roles状态映射生成卡片，同时加上加载提示：

if (isLoading) {
  return <div>加载中...</div>; // 替换成你需要的加载组件
}

return (
  <>
    {roles.map((path) => (
      <Box m="sm" pt="xl" key={path.id}> {/* key必须放在map返回的最外层元素上 */}
        <Card 
          p="lg" 
          radius="md" 
          href="#" 
          onClick={() => handlePopup(path.role)}
        >
          {/* 这里添加Card的内容，比如角色名称、描述等 */}
          {path.role}
        </Card>
      </Box>
    ))}
  </>
);

额外注意点 #

• 修复了原代码中Card标签的语法错误（radius="md缺少闭合引号）
• key属性要放在map返回的最外层元素上（原代码放在Card上，外层Box无key，不符合React要求）
• 加入错误处理和加载状态，提升用户体验

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