React中传递内部对象作为Props时出现Undefined问题排查

我有一个对象数组，每个对象都包含一个内部对象属性。把整个对象作为Props传递时信息能正常传递，但仅传递该内部对象时，它会变成undefined，导致无法读取其值。

我的代码： #

const cards = [
  {
    id: 1,
    title: "Example 01",
    description:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe harum delectus recusandae possimus officiis, eligendi praesentium dicta officia numquam at quidem doloribus sed odit fugiat deserunt iure? Cum vero exercitationem ea non aspernatur eos accusamus consequatur enim beatae, delectus laborum in illum eaque nesciunt nam cumque maiores debitis doloremque et fugiat labore voluptates tenetur at. Nesciunt, ea dignissimos! Sunt nihil deserunt, vitae id alias quidem iste accusamus. Doloribus, similique.",
    stats: { rating: 5, reviewCount: 30 },
  },
];

export default function List() {
  return (
    <div>
      {cards.map(
        (card) => (
          console.log("card in List:", card),
          console.log("stats in List:", card.stats),
          (<Card key={card.id} stats={cards.stats} card={card} />)
        )
      )}
    </div>
  );
}

function Card({ stats, card }) {
  console.log("card in Card: ", card);
  console.log("stats in Card: ", stats);
}

控制台输出： #

card in List: {id: 1, title: 'Example 01', description: 'Lorem, ipsum dolor sit amet consectetur adipisicin…lias quidem iste accusamus. Doloribus, similique.', stats: {…}} description: "Lorem, ipsum..." id: 1 stats: {rating: 5, reviewCount: 30} title: "Example 01" [[Prototype]]: Object
stats in List: {rating: 5, reviewCount: 30}
card in Card: {id: 1, title: 'Example 01', description: 'Lorem, ipsum dolor sit amet consectetur adipisicin…lias quidem iste accusamus. Doloribus, similique.', stats: {…}} description: "Lorem, ipsum..." id: 1 stats: {rating: 5, reviewCount: 30} title: "Example 01" [[Prototype]]: Object
stats in Card: undefined

报错信息： #

Uncaught TypeError: Cannot read properties of undefined (reading 'rating')

问题原因及解决方法： #

问题出在传递stats Props的代码上：你写的是stats={cards.stats}，但cards是数组，数组本身并没有stats属性，所以cards.stats的值是undefined，传递给子组件后自然就是undefined。

正确的写法应该是使用当前遍历到的数组元素card的stats属性，也就是stats={card.stats}。

修正后的List组件代码：

export default function List() {
  return (
    <div>
      {cards.map(
        (card) => (
          console.log("card in List:", card),
          console.log("stats in List:", card.stats),
          (<Card key={card.id} stats={card.stats} card={card} />)
        )
      )}
    </div>
  );
}

这样修改后，子组件就能正确接收到stats对象，也就不会出现读取rating属性时的报错了。

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