ReactJS - 读取 json 数据答案

【问题标题】：ReactJS - reading json dataReactJS - 读取 json 数据
【发布时间】：2019-04-07 16:12:09
【问题描述】：

我正在尝试通过导入 json 来填充表格数据。但是，出现以下错误： Uncaught Invariant Violation：对象作为 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
}

【问题讨论】：

我们可以看看那个json文件吗？
[{ "FName": "John", "LName": "M", "Age": "42" }, { "FName": "Michael", "LName": "S ", "年龄": "30" }]

标签： javascript json reactjs

【解决方案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 会在控制台中抛出此警告：

警告：列表中的每个孩子都应该有一个唯一的“key”属性。

请注意，即使您省略此键，它仍然会正确呈现。

【讨论】：

【解决方案2】：

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

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

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

在Fragment 或任何其他容器元素内包装数组（但在这种情况下，它会向 DOM 添加一个额外的节点，这是不好的，为了解决该问题，引入了Fragment's。有关更多详细信息，请在此处查看：@987654321 @)

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

return ([ list ]);

【讨论】：