React中API获取数据后状态更新但组件未渲染的问题求助

你的代码核心问题是使用forEach遍历数组无法生成可渲染的组件列表：

• forEach方法没有返回值，执行后groupsDisplay会是undefined，React无法渲染任何内容。
• 要生成组件列表，必须用map方法，它会返回包含React元素的数组，React可直接渲染该数组。

修改后的代码如下：

import React, { useEffect, useState } from 'react';
import { Box } from '@mui/system';
import { Link, Outlet } from 'react-router-dom';
import { Button } from '@mui/material';
import axios from 'axios';
import Group from './Group';


const Groups = () => {

  const [groupsData, setGroupsData] = useState([]);

  useEffect(() => {
    axios.get('/api/group/getGroups')
      .then(res => setGroupsData(res.data))
  }, [])

  // 用map替换forEach，返回组件数组
  const groupsDisplay = groupsData.map((group) => {
    // 建议把group数据传递给Group组件，让每个组件展示对应内容
    return <Group key={group._id} group={group} />
  })

  return (
    <Box>
      <Button component={Link} to="./createGroup" variant="contained">
        Button Press
      </Button>
      <Group />
      {groupsDisplay}
      <Outlet />
    </Box>
  )
}

export default Groups

额外说明：

• 必须给循环生成的每个组件添加唯一key属性（这里用group._id是合理选择），帮助React识别组件变化，提升渲染性能。
• 如果Group组件需要展示分组的具体数据，记得在组件内部接收group props并使用。

内容的提问来源于stack exchange，提问作者tan shi yu