对象作为 React 子对象是无效的，如果您打算渲染子对象的集合，请改用数组

Question

我在从数组访问所需数据时遇到问题，并且不断收到错误消息：

对象作为 React 子对象无效（已找到：带有键 {id、name、country、logo、flag、season、stands} 的对象）。如果您打算渲染子集合，请改用数组。

我非常感谢任何帮助，因为我陷入了困境。

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;

Answer 1

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

而不是以下：

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

它应该是：

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

代码沙箱：