ReactJS - 读取 json 数据

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（ 阅读更多）开始，你还可以选择返回空的 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”道具。

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

Answer 2

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

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

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

1. 将数组包装在Fragment或任何其他容器元素中（但在这种情况下，它会向 DOM 添加一个额外的节点，这很糟糕，并引入了Fragment's来解决该问题。有关更多详细信息，请查看此处： https : //reactjs.org/docs /fragments.html )

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

2. 返回一个数组。

   return ([ list ]);