如何解决React报错：Objects are not valid as React child？

算力阿峰

2026-9-28

问题原因

你写的条件判断和链式调用的优先级存在问题：

{!search 
  ?  users.sort((a,b) => a.name.localeCompare(b.name)) 
  :  users.filter(user => user.name.toLowerCase().includes(search.toLowerCase()))
.map(user => (/* 渲染逻辑 */))}

这里的.map只会作用在三目运算符为false时返回的filter结果上，当search为空的时候，三目直接返回排序后的users对象数组，没有调用map转成React可渲染的JSX元素数组，React尝试直接渲染对象数组就触发了对应的报错。

修复方案

把三目运算的整个返回结果用括号包裹，再统一调用map即可：

{
  (!search 
    ?  users.sort((a,b) => a.name.localeCompare(b.name)) 
    :  users.filter(user => user.name.toLowerCase().includes(search.toLowerCase()))
  ).map(user => (
    <div key={user.id}>
      <User onClick ={() => DisplayUser(user)}>{user.name}</User>
    </div>
  ))
}

可选优化建议

可以把排序、过滤的逻辑提前放到渲染逻辑之外，用单独变量存储处理后的数组，能避免括号嵌套混乱的问题，代码可读性更高：

// return 之前先处理用户列表
const processedUsers = !search 
  ? users.slice().sort((a,b) => a.name.localeCompare(b.name))
  : users.filter(user => user.name.toLowerCase().includes(search.toLowerCase()))

// 渲染时直接调用map
{processedUsers.map(user => (
  <div key={user.id}>
    <User onClick ={() => DisplayUser(user)}>{user.name}</User>
  </div>
))}