React报错：Objects are not valid as a React child (found: object with keys {input})如何解决？

错误原因 #

该报错的核心是代码中存在直接将JS对象作为React子元素渲染的操作，React不支持直接渲染对象类型的内容。

排查&解决步骤 #

• 优先检查InputOption组件实现：你给该组件传递的Icon是组件对象，若你在InputOption内部直接写{Icon}渲染图标，就会触发该报错。正确写法是将Icon作为组件标签调用，示例：

// InputOption组件内错误写法
function InputOption({Icon, title, color}) {
  return <div>{Icon} <span>{title}</span></div>
}

// 修正后写法
function InputOption({Icon, title, color}) {
  return <div><Icon style={{color}} /> <span>{title}</span></div>
}

• 其次检查Post组件实现：确认Post组件内渲染name/description/message/photoUrl四个属性时，没有对属性做多余的对象包裹操作，也没有直接渲染未处理的对象类型字段。
• 可通过分段注释定位问题：先注释掉feed__inputOptions区块的所有InputOption渲染，再注释掉posts列表的map渲染逻辑，逐段放开代码，看哪段代码放开后触发报错，即可精准定位问题组件。
• 额外验证：打开Firebase控制台检查posts集合内的文档字段，确认所有字段值都是字符串类型，没有存入对象类型的数据。

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