React新手求助：Objects are not valid as a React child 报错排查

错误根源 #

你的Tarea组件参数接收逻辑错误。React组件的所有传入属性会被打包成一个props对象，而非单个值。你当前写的function Tarea(texto)里的texto，本质是包含{texto: 'Aprender React'}的完整props对象，直接渲染这个对象就会触发报错。

修复方案 #

修改Tarea.jsx的组件定义，两种可选方式：

方式1：解构props（推荐） #

直接从props对象中提取目标属性，代码更简洁：

import React from 'react'
import '../css/tarea.css'

function Tarea ({ texto }) {
  return (
    <div className='tarea-contenedor'> 
        <div className='tarea-texto'> {/* 注意修正拼写错误：tarea-texo → tarea-texto */}
            {texto}
        </div> 
        <div className='tarea-icono'>
            Eliminar
        </div>   
    </div>
  )
}

export default Tarea

方式2：直接访问props对象 #

如果不习惯解构，可保留完整props参数后访问对应属性：

import React from 'react'
import '../css/tarea.css'

function Tarea (props) {
  return (
    <div className='tarea-contenedor'> 
        <div className='tarea-texto'>
            {props.texto}
        </div> 
        <div className='tarea-icono'>
            Eliminar
        </div>   
    </div>
  )
}

export default Tarea

额外提示：你代码中的类名tarea-texo存在拼写错误，建议修正为tarea-texto，避免后续样式失效问题。

学习建议 #

1. 吃透props机制：React组件的传入属性永远是一个对象，必须通过该对象访问具体属性，这是组件通信的核心基础。
2. 熟练使用解构语法：解构props是React开发的高频写法，多属性场景下function Tarea({ texto, id, completada })比反复写props.xxx更清晰高效。
3. 代码片段要知其然：rafce这类代码片段能提升效率，但要理解生成代码的逻辑，比如默认的props参数是什么，不要盲目依赖片段忽略原理。
4. 学会读报错信息：React的报错通常指向明确，本次报错已经提示“发现带{texto}键的对象，无法作为子元素渲染”，顺着这个线索就能快速定位问题。

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