React报错：Objects are not valid as a React child 问题求助

我是React新手，开发应用时反复遇到「Uncaught Error: Objects are not valid as a React child」错误，既不知道错误含义也不知道怎么解决。我只是尝试从父组件向子组件传递数据，之前试过fetch和数组传值，现在用基础props传值还是出现这个错误。

父组件代码 #

import axios, * as others from 'axios';
import Row from 'react-bootstrap/Row';
import Cerd from "./Cerd";
import movieArray from "./MovieArray";

export function UseFetch(message){
   let number =  movieArray.length;
   console.log(number);
   let image = movieArray[0].image;
   let text = movieArray[0].title;
   let actors = movieArray[0].actors;
   const toStringer = text.toString();
   console.log(toStringer);

    return(
        <div className="row-wrapper">
            <Row>    
                <Cerd title="ciao"/>
            </Row>
        </div>
    )
}

子组件代码 #

import Card from 'react-bootstrap/card';
    
export default function Cerd(title){
    console.log(title);
    
    return(
        <div>{title}</div>
    )
}

错误信息 #

我已经试过换电脑和网上搜解决方案，但问题还是存在。我传递的只是简单字符串，不是数组或对象，这个错误反复出现，求帮忙解决！

补充：movieArray代码 #

const movieArray = [{
title: "ciao",
actors: "celine dion",
image: "./public/logo192.png"
},{
title: "ciao",
actors: "celine dion",
image: "./public/logo192.png"
},{
title: "ciao",
actors: "celine dion",
image: "./public/logo192.png"
}]

export default movieArray;

问题原因及解决办法 #

核心问题是子组件接收props的方式错误：React组件的第一个参数是包含所有传入属性的props对象，而非单个属性值。

你的子组件Cerd直接把title作为参数，实际上这个参数是完整的props对象（内部包含title: "ciao"），当你在<div>{title}</div>里直接渲染这个对象时，就触发了「Objects are not valid as a React child」错误——React不允许直接渲染对象类型的内容。

解决方法有两种：

1. 解构props对象，直接提取title属性：

import Card from 'react-bootstrap/card';
    
export default function Cerd({title}){ // 解构props中的title属性
    console.log(title);
    
    return(
        <div>{title}</div>
    )
}

2. 通过完整props对象访问title属性：

import Card from 'react-bootstrap/card';
    
export default function Cerd(props){ // 接收完整的props对象
    console.log(props.title);
    
    return(
        <div>{props.title}</div>
    )
}

修改子组件后，就能正常渲染传入的字符串了。

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