对象作为 React 子项无效（找到：具有键 {<key>} 的对象）。如果您打算呈现子集合，请改用数组

Question

我想制作一个可以容纳 material-ui 网格的组件。

我在这里制作了一个codesandbox：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

Answer 1

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

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

Answer 2

正如 Thomas 所指出的，您从错误的文件中导入了 CardItem。此外，在 CardItem 中，您使用了一个名为 card 的道具，但也为 return 组件创建了一个名为 card 的新变量，这会导致命名冲突并尝试渲染一个不允许的对象。

如果您更改变量名称，它似乎可以工作。

分叉here

对象作为 React 子项无效（找到：具有键 {<key>} 的对象）。如果您打算呈现子集合，请改用数组

Objects are not valid as a React child (found: object with keys {<key>}). If you meant to render a collection of children, use an array instead

reactjs

react-props