ReactJS-无法读取JSON数组

我的App.jsx文件如下。ReactJS-无法读取JSON数组

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> 
     ); 
     } 
     }

export default 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"}] 
}]

来源

2017-02-23 James

this.state.data没有财产，它工作正常table，因为它是一个数组单个的对象。

正确的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"} 
    ] 
}

，并使用this.state.data.table.map。

来源

2017-02-23 13:34:39 dfsq

this.state.data.table.map无法正常工作。 ./app/components/dataa.json中的错误您可能需要一个合适的加载程序来处理此文件类型。 SyntaxError：意外标记（2：9） – James

ReactJS-无法读取JSON数组

回答

相关问题