React渲染报错：Objects are not valid as a React child 求助

错误原因 #

你代码里的 <Typography variant="h6" component="p">{teams.league}</Typography> 直接将整个league对象传给了React组件，React无法直接渲染对象类型的子元素，这就是报错的核心原因。

修复步骤 #

1. 替换对象渲染为具体属性
   把直接渲染league对象的代码，改成渲染对象的具体字段，比如联赛名称、国家等：

<Typography variant="h6" component="p">
  {teams.league.name} - {teams.league.country} ({teams.league.season}赛季)
</Typography>

2. 修复类名错误
   你定义的样式类是chipLabel，但循环渲染Chip时误用了classes.chip，改成classes.chipLabel保证样式生效：

<Chip label={g.points} className={classes.chipLabel} />

3. 优化key值（可选但推荐）
   用g.team.id作为列表项的key比g.points更可靠，避免因积分重复导致的key冲突：

<li key={g.team.id}>

完整修改后的组件代码 #

import React from "react";
import Chip from "@material-ui/core/Chip";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  chipRoot: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    flexWrap: "wrap",
    listStyle: "none",
    padding: theme.spacing(1.5),
    margin: 0,
  },
  chipSet: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    flexWrap: "wrap",
    listStyle: "none",
    padding: theme.spacing(1.5),
    margin: 0,
  },
  chipLabel: {
    margin: theme.spacing(0.5),
  },
}));

const TeamDetails = (props) => {
  const classes = useStyles();
  const teams = props.teams

  return (
    <>
      <Typography variant="h5" component="h3">
        Overview
      </Typography>

      <Typography variant="h6" component="p">
        {teams.league.name} - {teams.league.country} ({teams.league.season}赛季)
      </Typography>
      <div className={classes.chipRoot}>
      <Paper component="ul" className={classes.chipSet}>
        <li>
          <Chip label="球队积分" className={classes.chipLabel} color="primary" />
        </li>
        {teams.league.standings[0].map((g) => (
          <li key={g.team.id}>
            <Chip label={`${g.team.name}: ${g.points}`} className={classes.chipLabel} />
          </li>
        ))}
      </Paper>
      </div>
    </>
  );
};
export default TeamDetails;

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