React渲染动态表格行时触发Invariant Violation错误求助

这个错误很常见，我来帮你理清问题所在：

错误提示Objects are not valid as React child (found: objects with keys {name})意思是你试图直接把一个对象当作React的子元素渲染了，React只允许渲染字符串、数字、React元素或者这些类型的数组，对象是不可以直接渲染的。

回到你的代码，问题出在这两个核心点：

1. JSX中变量没有用{}包裹 #

你现在的循环代码里，<td>里的result[i].name是直接写在文本里的，React会把它当成普通字符串"result[i].name"处理，但如果你原本是想渲染变量的实际值，必须用{}把JavaScript表达式包裹起来——这是JSX的基本语法规则，用来区分普通文本和动态变量。

2. 数据结构可能存在嵌套对象 #

错误提示里提到的objects with keys {name}，说明你的result[i].name本身是一个对象（比如数据结构是{name: "张三"}这种嵌套形式），而不是直接的字符串/数字。这种情况下就算你加了{}，直接渲染{result[i].name}也会报错，因为你渲染的是整个对象，而不是对象里的具体属性值。

修复后的代码 #

先调整循环部分的代码，加上{}包裹变量，同时给<tr>加上key属性（React列表必须要有唯一key，避免性能问题和控制台警告）：

let result = this.props.result.exactMatches; 
var rows = []; 
for(var i = 0; i < result.length; i++) { 
  rows.push( 
    <tr key={i}> {/* 建议用数据里的唯一ID作为key，比如result[i].id，比索引更稳定 */}
      {/* 如果result[i].name是对象，就渲染它的具体属性，比如result[i].name.name */}
      <td width="50%"> {result[i].name} </td> 
      <td width="50%"> {result[i].position} </td> 
    </tr> 
  ); 
}

如果你的result[i].name确实是带name键的嵌套对象，那就把代码改成：

<td width="50%"> {result[i].name.name} </td> 

另外，也可以用更简洁的数组map方法来生成行，比for循环更符合React的开发风格：

const rows = this.props.result.exactMatches.map((item, index) => (
  <tr key={index}> {/* 优先用item的业务唯一ID，比如item.id */}
    <td width="50%">{item.name.name}</td>
    <td width="50%">{item.position}</td>
  </tr>
))

这样修改后，应该就能解决这个错误了。

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