React路由动态生成地址报错求助：Objects are not valid as a React child

嘿，我碰到过类似的问题，咱们来一步步拆解解决它。你看到的这个错误提示虽然说“对象不能作为React子元素”，但根源大概率和你动态拼接NavLink的to属性有关，或者是category.id的类型出了问题。

先搞清楚错误到底来自哪 #

错误里提到的{id, name}对象，说明React在某个地方尝试直接渲染整个对象，而不是对象的某个属性值。结合你的代码，有两个最可能的原因：

• category.id不是字符串/数字：如果category.id是个嵌套对象（比如后端返回的id是个带其他属性的对象），那'/' + category.id会被转成/[object Object]，虽然这本身不一定直接触发错误，但如果后续路由处理或者其他渲染逻辑里用到这个值，就会出问题。
• JSX里的隐形小问题：你的<li>里先写了{ category.name }，有没有可能category.name也是个对象？不过你说写死to地址就正常，那这个可能性比较小，重点还是看category.id。

具体解决步骤 #

1. 先确认category的结构 #

在map函数里加个console.log，看看每个category到底是什么样的：

this.props.categories.map((category) => {
  console.log('当前分类:', category); // 打开控制台看输出，确认id是不是基本类型
  return (
    // 你的JSX代码
  )
})

如果发现category.id是个对象（比如{ value: '123' }），那你得取它的实际值来拼接路由：

<NavLink to={`/${category.id.value}`} className="btn btn-warning float-right">Add To</NavLink>

2. 用模板字符串更安全地拼接路由 #

字符串拼接有时候会因为类型转换出问题，换成ES6的模板字符串更清晰可靠：

<NavLink to={`/${category.id}`} className="btn btn-warning float-right">Add To</NavLink>

3. 检查有没有不小心渲染了整个对象 #

再扫一遍你的<li>内容，确保没有写成{category}（整个对象），而是{category.name}（对象的属性），这部分看你的代码是对的，但还是确认下更稳妥。

小提醒：Delete按钮记得加点击事件 #

你的Delete按钮现在还没绑定处理函数，别忘了补上类似Edit的逻辑：

<a className="btn btn-danger float-right" onClick={() => this.handleDelete(category.id)}> Delete </a>

验证一下 #

先按第一步打印category确认id的类型，然后用模板字符串改路由，应该就能解决这个错误了。如果还是不行，再检查下你的路由配置，确保动态路由是path="/:categoryId"这种形式，能正确接收参数。

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