React报错：Objects are not valid as a React child，请求排查错误原因

问题分析 #

你遇到的Invariant Violation错误，核心原因有两个：

1. 函数组件参数是props对象：你的Contact组件直接接收name作为参数，但React函数组件的第一个参数始终是包含所有属性的props对象，所以这里的name实际是{name: "Ed"}的对象，把对象直接渲染到JSX里就会触发"Objects are not valid as a React child"的错误。
2. 组件调用方式错误：在App里用<Contact("Ed")/>这种普通函数调用的写法不符合React组件规范，组件属性需要通过键值对形式传递。

修复后的代码 #

Contact.js #

import React from "react"

// 从props对象中解构name属性，或直接使用props.name
export default function Contact({ name }){
    return <h1>hi {name}!</h1>
}

App.js #

import React from "react"
import Contact from "./Contact.js"

function App() {
    return (
        <div className="contacts">
          {/* 通过属性传递方式给组件传值 */}
          <Contact name="Ed"/>
        </div>
    )
}

export default App

验证说明 #

修改后，Contact组件会正确接收name属性值而非整个props对象，渲染时会输出hi Ed!文本，不会再触发对象无法作为React子元素的错误。

内容的提问来源于stack exchange，提问作者עדנה מלמד