javascript - 尝试呈现表行元素数组时的不变冲突

Question

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

但是我收到以下错误:

Unhandled Rejection Invariant Violation: Objects are not valid as React child (found: objects with keys {name}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object).

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

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>
   );  
}

然后在返回的 jsx 元素中我有以下 div 元素:

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

提前致谢!

Answer 1

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

Objects are not valid as React child

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

If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object)

我建议通过 createFragment文档。描述的问题与您的类似。

React 渲染管道使用一些启发式方法来提高性能。其中之一要求开发人员使用唯一的 <tr /> 来区分相同类型的相邻元素(例如 key )他们每个人的属性(property)。

关于解决方案本身，我建议采用更函数式的编程方法。 map()是一种用于数组的方法。把它想象成把这一系列的猫变成狗的阵列，但让我告诉你怎么做。

在您的例子中，您想要转换一个名为 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>