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數組

回答

相關問題