在 React 中动态创建表行答案

【问题标题】：Dynamically creating table rows in React在 React 中动态创建表行
【发布时间】：2018-06-13 14:12:35
【问题描述】：

我的要求是通过对数组对象的迭代来动态创建表行。我正在使用下面的代码来实现它：

details = _.forEach(executionDetails, function(value) {
        return (
          <TableRow>
            <TableCell> { value.numResults } </TableCell>
            <TableCell> { value.timeStamp } </TableCell>
          </TableRow>
        )
      })
  <Table>
   <TableBody>
       {details}
   </TableBody>
  </Table>

但这不起作用，我收到错误：对象作为 React child 无效。如果您打算渲染一组子项，请改用数组。提前致谢

【问题讨论】：

标签： reactjs

【解决方案1】：

forEach 不返回任何内容，您需要使用 map 才能返回结果

details = executionDetails.map(function(value) {
    return (
      <TableRow>
        <TableCell> { value.numResults } </TableCell>
        <TableCell> { value.timeStamp } </TableCell>
      </TableRow>
    )
  })

<Table>
   <TableBody>
       {details}
   </TableBody>
</Table>

【讨论】：