Question

我的App.jsx文件位于下方。

import React from 'react';
class App extends React.Component {
constructor() {
  super();

  this.state = {
     data:require('json!./dataa.json')

  }
}

render() {
  return (
    <body>
     <div>
        <Header/>
        <center>
        <table>
        <tr><th>NAME</th><th>VALUE</th><th>COLOR</th><th>Edit Table</th></tr>
           <tbody>
           {this.state.data.table.map(person, i) => <TableRow key = {i} data = {person} />)}
           </tbody></table></center>
     </div>
     </body>
  );
}
}

 class Header extends React.Component {
 render() {
  return (
     <div><center>
        <h1>Creation of table from JSON</h1></center>
     </div>
  );
  }
  }

   class TableRow extends React.Component {
   render() {
   return (
     <tr>
        <td>{this.props.data.NAME}</td>
        <td>{this.props.data.VALUE}</td>
        <td>{this.props.data.COLOR}</td>
         <td contentEditable='true'></td>
        </tr>
        );
         }
         }

导出默认App;

和我的dataa.json文件如下所示

[{"table":
[{"NAME":"Alan","VALUE":12,"COLOR":"blue"},
{"NAME":"Shan","VALUE":13,"COLOR":"green"},
{"NAME":"John","VALUE":45,"COLOR":"orange"},
{"NAME":"Minna","VALUE":27,"COLOR":"teal"}]
}]

问题：编译正常。但它在浏览器中显示错误“无法读取地图未定义的属性”。如何解决

注意：但是当json文件如

时，它可以正常工作

[{"NAME":"Alan","VALUE":12,"COLOR":"blue"},
{"NAME":"Shan","VALUE":13,"COLOR":"green"},
{"NAME":"John","VALUE":45,"COLOR":"orange"},
{"NAME":"Minna","VALUE":27,"COLOR":"teal"}]
}]

ReactJS-无法读取JSON数组

0 个答案: