Javascript 尝试呈现表行元素数组时发生不变冲突

我正在使用React，并尝试呈现一个表，该表的行数将根据结果大小而动态变化

但是，我得到以下错误：

未处理的拒绝不变冲突：对象作为无效对象 反应子对象（找到：具有键{name}的对象）。如果你想渲染 如果是子对象的集合，请改用数组或换行对象 使用createFragment（对象）

我在渲染函数中有以下代码和循环：

let result = this.props.result.exactMatches;
var rows = [];
for(var i = 0; i< result.length; i++) {
   rows.push(
      <tr>
         <td width="50%"> result[i].name </td>
         <td width="50%"> result[i].position </td>
      </tr>
   );  
}

let result=this.props.result.exactMatches；
var行=[]；
对于（变量i=0；i

然后在return jsx元素中，我有以下div元素：

<div>
<table style={{width:'100%'}}>
   <tbody>
   <tr>
      <th width="50%"> Name </th>
      <th width="50%"> Position </th>
    </tr>
    {rows}
    </tbody>
</table>
</div>

名称
位置
{rows}

---

提前谢谢

这是正确的方法

let result = this.props.result.exactMatches;
var rows = [];
for(var i = 0; i< result.length; i++) {
   rows.push(
           {name: result[i].name , position:result[i].position}
   );  
}

let result=this.props.result.exactMatches；
var行=[]；
对于（变量i=0；i

把它渲染成这样

<div>
<table style={{width:'100%'}}>
   <tbody>
   <tr>
      <th width="50%"> Name </th>
      <th width="50%"> Position </th>
    </tr>
    {rows.map((rowData, index) =>{
    return  <tr key=`results-row-${rowData.name}-${index}`>
         <td width="50%"> {rowData.name} </td>
         <td width="50%"> {rowData.position} </td>
      </tr>
    })}
    </tbody>
</table>
</div>

名称
位置
{rows.map（（rowData，index）=>{
返回
{rowData.name}
{rowData.position}
})}

错误日志很容易解释，但让我们仔细查看一下

对象作为子对象无效

这几乎意味着React不知道以您提供的形式呈现React组件数组

如果要呈现子对象集合，请改用数组或使用createFragment（对象）包装对象

我建议查阅一下文件。所描述的问题与您的问题类似

React渲染管道使用两种启发式方法来提高性能。其中之一要求开发人员在每个元素中使用唯一的

键

属性来区分相同类型的相邻元素（例如

）

至于解决方案本身，我建议采用更具功能性的编程方法。是一种用于数组的方法。想象一下，把这一系列的猫变成一系列的狗，但让我告诉你怎么做

在您的例子中，您希望将一个名为

exactMatches

的匹配数组转换为表中的行，这就是我们要做的

<div>
<table style={{width:'100%'}}>
   <tbody>
   <tr>
      <th width="50%"> Name </th>
      <th width="50%"> Position </th>
    </tr>
    this.props.result.exactMatches.map((match, index) => (
      <tr key={`row-${match.name}-${index}`}>
         <td width="50%">match.name</td>
         <td width="50%">match.position</td>
      </tr>
    ))
    </tbody>
</table>
</div>

名称
位置
this.props.result.exactMatches.map（（匹配，索引）=>(
match.name
匹配位置
))

这是一种正确的方法：
名称
位置
{this.props.exactMatches.map（（项目，i）=>
{item.name}
{item.position}
)}

---

注意键，如果每个实体中都有唯一的值，则可以使用它。

请共享您的

exactMatches

对象您忘记在

行中返回JSX。map

函数。还有每个

tr

的

键

道具。你没有在地图函数中返回JSX。很好！编辑了我的答案

This is a correct way:

<div>
<table style={{width:'100%'}}>
  <tbody>
  <tr>
    <th width="50%"> Name </th>
    <th width="50%"> Position </th>
  </tr>
  {this.props.exactMatches.map((item, i) => <tr key={i}>
    <td width="50%"> {item.name }</td>
    <td width="50%"> {item.position} </td>
  </tr>)}
  </tbody>
 </table>
</div>