React父组件传参渲染子组件时报Objects are not valid错误如何解决？

问题根源 #

1. 子组件props接收方式错误 #

React 函数组件的第一个入参永远是整体的props对象，你写的function Card( source, text )里：

• 第一个参数source实际上是包含了所有传入属性的对象{source: "xxx", text: "xxx"}
• 第二个参数text实际上是React内置的children属性，并不是你传入的text值
  你后续直接把source（对象类型）放到<img src={source}>和{text}位置渲染，就触发了「对象不能作为React子元素」的报错。

2. 图片路径映射逻辑错误 #

你cards数组里imgSrc存的是字符串"first"/"second"/"third"，直接传给img的src不会自动匹配你子组件里import的图片变量，需要手动做映射关联。

修复步骤 #

第一步：修正子组件props接收方式 #

两种写法选一种即可：

写法1：先取props对象再解构

function Card(props) {
  const {source, text} = props
  // 剩余代码不变
}

写法2：入参直接解构（更常用）

function Card({ source, text }) {
  // 剩余代码不变
}

第二步：补全图片映射逻辑 #

在Card组件里加一个图片映射表，把传入的字符串和你导入的图片变量关联起来：

// 你已经导入的图片变量
import first from "../../images/veloce.png"
import second from "../../images/sicuro.png"
import third from "../../images/vicino.png"

// 新增映射表
const imgMap = {
  first: first,
  second: second,
  third: third
}

function Card({ source, text }) {
    return (
        <Box className="foundation-card">
            {/* 从映射表里取对应的图片变量 */}
            <img src={imgMap[source]}/>
            <Typography variant="h6">{text}</Typography>
            <Typography variant="body2">{text}</Typography>
        </Box>
    )
}

注：你当前写的两个Typography都绑定了text参数，渲染后内容会重复，需要展示不同内容的话可以自己新增对应props参数。

第三步：可选优化：给遍历的Card加key属性 #

React遍历渲染列表时需要给每个子元素加唯一key，避免渲染异常，修改父组件的map逻辑：

{cards.map((p, index) => {
  return <Card key={index} source={p.imgSrc} text={p.desc} />
})}

如果你的desc是唯一值，用p.desc当key比index性能更好。

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