Javascript ReactJS-读取json数据

我试图通过导入json来填充表数据。但是，下面是一个错误： 未捕获不变冲突：对象作为React子对象无效（找到：具有键{list}的对象）。如果要呈现子对象集合，请改用数组

---

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

从“/data/reg.json”导入注册表；
类TableRow扩展组件{
render（）{
const{data}=this.props；
const list=data.map（adata=>{
返回(
{adata.FName}
{adata.LName}
{adata.Age}
)//返回
})//地区名单
返回(
{list}
)；//返回
}//渲染
}//类
类DTable扩展组件{
render（）{
返回(
);
}
}
类DataTable扩展组件{
render（）{
返回(
)；//返回
}//渲染
}

问题 我重新创建了你的设置，试图重现你的错误。你可以看到我在这里复制的内容：。问题似乎在于映射创建了一些表行，但是没有父元素来包装它们，这是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 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

类TableRow扩展组件{
render（）{
const{data}=this.props；
const list=data.map（adata=>{
返回(
{adata.FName}
{adata.LName}
{adata.Age}
)//返回
})//地区名单
return[list]；//return
}//渲染
}//类

但是，此选项的一个限制是，必须向项目添加一个键，否则React将在控制台中抛出此警告：

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

请注意，即使忽略此键，它仍将正确渲染。
最初，在
React
中有一个限制，即您只能从渲染函数返回单个元素，但在
React 16
之后它已更改，现在您可以返回元素数组

在您的例子中，您正在尝试创建元素的数组，但没有提到它是一个数组，因此您必须使用
Fragment
对它进行分组

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

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

返回(
{list}
);

返回一个数组

返回（[list]）

我们可以看看那个json文件吗？[{“FName”：“John”，“LName”：“M”，“Age”：“42”}，{“FName”：“Michael”，“LName”：“S”，“Age”：“30”}]
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