Question

我正在尝试通过导入json填充表数据。但是，出现以下错误：未捕获的不变违规：对象作为React子对象无效（找到：键为{list}的对象）。如果要渲染子级集合，请改用数组。

以下是我正在使用的代码：

import reg from "./data/reg.json";

class TableRow extends Component {
  render() {
    const { data } = this.props;

    const list = data.map(adata => {
      return (
        <tr>
          <React.Fragment>
            <td key={adata.FName}>{adata.FName}</td>
            <td key={adata.LName}>{adata.LName}</td>
            <td key={adata.Age}>{adata.Age}</td>
          </React.Fragment>
        </tr>
      )//return
    })//regionslist

    return (
      { list }
    );//return
  } //render
} //class


class DTable extends Component {
  render() {
    return (
      <Table striped bordered hover>
        <TableHeader />
        <tbody>
          <TableRow data={this.props.data} />
        </tbody>
      </Table>
    );
  }
}

class DataTable extends Component {
  render() {
    return (
      <DTable data={reg} />
    );//return
  } //render
}

Answer 1

问题

我重新创建了您的设置，试图重现您的错误。您可以在这里查看我复制的内容：Stackblitz。问题似乎在于您的地图创建了一些表行，但是没有父元素来包装它们，这是JSX所必需的。

解决方案

可以通过将{list}包装在React.Fragment内来解决此问题：

class TableRow extends Component {
  render() {
    const { data } = this.props;

    const list = data.map(adata => {
      return (
        <tr>
          <td key={adata.FName}>{adata.FName}</td>
          <td key={adata.LName}>{adata.LName}</td>
          <td key={adata.Age}>{adata.Age}</td>
        </tr>
      )//return
    })//regionslist

    return (
      <React.Fragment>
      { list }
      </React.Fragment>
    );//return
  } //render
} //class

在列表项周围添加React.Fragment解决了该问题。您可以在此处查看有效的解决方案：Stackblitz

替代品

从React 16.2（Read more）开始，您还可以选择返回空的JSX标签，而不用键入React.Fragment。上面的解决方案如下所示：

class TableRow extends Component {
  render() {
    const { data } = this.props;

    const list = data.map(adata => {
      return (
        <tr>
          <td key={adata.FName}>{adata.FName}</td>
          <td key={adata.LName}>{adata.LName}</td>
          <td key={adata.Age}>{adata.Age}</td>
        </tr>
      )//return
    })//regionslist

    return (
      <>
      { list }
      </>
    );//return
  } //render
} //class

最后，从React 16.0开始，也可以返回元素数组。如果您选择执行此操作，则上面的代码将如下所示：

class TableRow extends Component {
  render() {
    const { data } = this.props;

    const list = data.map(adata => {
      return (
        <tr>
          <td key={adata.FName}>{adata.FName}</td>
          <td key={adata.LName}>{adata.LName}</td>
          <td key={adata.Age}>{adata.Age}</td>
        </tr>
      )//return
    })//regionslist

    return [list];//return
  } //render
} //class

然而，该选项的局限性在于必须向项添加密钥，否则React将在控制台中引发此警告：

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

请注意，即使您省略此键，它也仍然可以正确显示。

Answer 2

最初，React中存在一个限制，即您只能从渲染函数返回单个元素，但是在React 16之后已更改，现在可以返回元素数组。

在您的情况下，您尝试对元素进行数组处理，而没有提及它是一个数组，因此必须使用Fragment将其分组。

可以通过两种方式解决此问题：

将数组包装在Fragment或任何其他容器元素中（但在那种情况下，它将在DOM中添加一个额外的节点，这很不好，并引入了解决问题Fragment's的方法。）更多详细信息，请点击此处：https://reactjs.org/docs/fragments.html）

return ( <React.Fragment> { list } </React.Fragment> );
返回一个数组。

return ([ list ]);

ReactJS-读取JSON数据

2 个答案:

问题

解决方案

替代品