javascript - ReactJS - 读取 json 数据

Question

我正在尝试通过导入 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
}

Answer 1

问题

我重新创建了您的设置，试图重现您的错误。你可以看到我在这里转载的内容:Stackblitz .问题似乎在于您的 map 创建了一些表格行，但没有父元素来包装它们，这是 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 将在控制台中抛出此警告:

Warning: Each child in a list should have a unique "key" prop.

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