React组件状态更新后不渲染：API成功取数后卡片未渲染该如何解决？

问题根因 #

渲染失败的核心原因是Array.map的回调函数没有返回JSX元素，同时代码存在useEffect依赖缺失的隐患。

• Array.map回调无返回值：你在map中使用普通函数声明包裹JSX，但没有写return语句，导致map最终返回全是undefined的数组，React不会渲染任何内容。
• useEffect依赖缺失：当前useEffect的依赖数组为空，用到的auth、userApi都没有加入依赖，后续如果用户ID变化不会重新拉取数据，属于React hooks的常见语法隐患。
• 状态默认值建议补充：subjects状态没有设置默认空数组，可选链判断会增加不必要的代码冗余。

修正代码 #

export default function Subjects() {
  const userApi = useUserService();
  const auth = useRecoilValue(AuthAtom);
  const [loading, setLoading] = React.useState<boolean>(true);
  const [subjects, setSubjects] = React.useState<Subject[]>([]);

  React.useEffect(() => {
    if (!auth?.userId) return
    userApi.getSubjects(auth.userId).then((value: Subject[]) => {
      setSubjects(value);
      setLoading(false);
    });
  }, [auth, userApi]);

  return (
    <Box display="flex" flexDirection="row" alignItems="center">
      {!loading &&
        subjects.map((subject: Subject) => (
          <Card key={subject.name}>
            <CardActionArea>
              <CardContent>{subject.name}</CardContent>
            </CardActionArea>
          </Card>
        ))}
    </Box>
  );
}

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