对象不能作为React子元素，如果你想呈现一个子元素集合，请使用数组。

Question

我在访问数组中所需的数据时遇到了问题，一直收到错误消息："对象不是React子元素的有效值（找到具有键{id，name，country，logo，flag，season，standings}的对象）。如果您想呈现子代集合，请改用数组。"

非常感谢帮助，我很困扰。

export default {
  league: {
    id: 39,
    name: "Premier League",
    country: "England",
    logo: "https://media.api-sports.io/football/leagues/39.png",
    flag: "https://media.api-sports.io/flags/gb.svg",
    season: 2021,
    standings: [
      [
        {
          rank: 1,
          poster_path: "/iTQHKziZy9pAAY4hHEDCGPaOvFC.jpg",
          team: {
            id: 50,
            name: "Manchester City",
            logo: "https://media.api-sports.io/football/teams/50.png",
          },
          points: 93,
          goalsDiff: 73,
          group: "Premier League",
          form: "WDWWW",
          status: "same",
          description: "Promotion - Champions League (Group Stage)",
          all: {
            played: 38,
            win: 29,
            draw: 6,
            lose: 3,
            goals: {
              for: 99,
              against: 26,
            },
          },
          home: {
            played: 19,
            win: 15,
            draw: 2,
            lose: 2,
            goals: {
              for: 58,
              against: 15,
            },
          },
          away: {
            played: 19,
            win: 14,
            draw: 4,
            lose: 1,
            goals: {
              for: 41,
              against: 11,
            },
          },
          update: "2022-05-22T00:00:00+00:00",
        },
      ],
    ],
  },
};
------------


My component is as follows:
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
  console.log(props.teams)

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

      <Typography variant="h6" component="p">
        {teams.league}
      </Typography>
      <div className={classes.chipRoot}>
      <Paper component="ul" className={classes.chipSet}>
        <li>
          <Chip label="Genres" className={classes.chipLabel} color="primary" />
        </li>
        {teams.league.standings[0].map((g) => (
          <li key={g.points}>
            <Chip label={g.points} className={classes.chip} />
          </li>
        ))}
      </Paper>
      </div>
      </>
  );
};
export default  TeamDetails;

- cduff

Answer 1

这个问题出在teams.league是一个对象，这就是React抱怨无法渲染的原因。

不要像下面这样写：

<Typography variant="h6" component="p">
  {teams.league}
</Typography>

应该是这样的：

<Typography variant="h6" component="p">
  {teams.league.name}
</Typography>

Codesandbox：

- Amila Senadheera

---

当然，@Amila Senadheera，我已将其标记为答案。再次感谢。 - cduff