时间戳

首页 > 解决方案 > 对象作为 React 子对象无效（找到：带键的对象 {}）。如果您打算渲染一组孩子，请改用数组

reactjs - 对象作为 React 子对象无效（找到：带键的对象 {}）。如果您打算渲染一组孩子，请改用数组

问题描述

我想制作一个包含 material-ui 网格的组件。

我在这里制作了一个代码框：codesanbox

这是容器组件。AllCards.js

// All the required imports here

const exer = [
  {
    imageurl: "https://media1.giphy.com/media/26tPtg8M3i6DPSSt2/200w.gif",
    imagealt: "react-gif",
    title: "Elongacion de columna",
    body: "Este es un ejercicio que sirve para estirar los lumbares.",
    firstButtonText: "Ver",
    secondButtonText: "Ayuda"
  },
  {
    imageurl: "https://media1.giphy.com/media/26tPtg8M3i6DPSSt2/200w.gif",
    imagealt: "react-gif",
    title: "Elongacion de cuadriceps",
    body: "Este es un ejercicio que sirve para estirar los cuadriceps.",
    firstButtonText: "Ver"
  }
];

function AllCards() {
  const [exercises, setExercises] = useState(null);

  useEffect(() => {
    setExercises(exer);
  }, [exercises]);

  let ret = exercises ? <CardGrid cards={exercises} /> : null;
  return ret;
}

export default AllCards;

这是CardGrid.js组件

const CardGrid = props => {
  const classes = useStyles();
  const { cards } = props;

  return (
    <div className={classes.root}>
      <Grid container spacing={3} justify="space-evenly" alignItems="center">
        {cards.map((currentCard, ind) => (
          <Grid key={ind} item xs>
            <CardItem card={currentCard} />
          </Grid>
        ))}
      </Grid>
    </div>
  );
};

我的CardItem.js组件

const CardItem = props => {

  let ret = null;       
  if (props.card) {
    console.log("ITEM PROPS", props);
    ret = ( <Card . . . )
  // return { ret };     <-- THIS IS WRONG
     return ret          <-- SHOLD BE LIKE THIS
};

我有以下错误

Error: Objects are not valid as a React child (found: object with keys {card}). If you meant to render a collection of children, use an array instead.
    in CardItem (at CardGrid.js:49)

解决了：

在 CardItem.js 我要返回{ ret }

它应该是return ret

标签： reactjsreact-props

解决方案

在您的沙盒示例中，您import CardItem from "./CardGrid";的代码位于 CardGrid.js 的顶部。我假设你想说import CardItem from "./CardItem";

然后，我相信您的组件需要能够保存 ForwardRefs，本指南将帮助您。https://material-ui.com/guides/composition/

推荐阅读