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

デフォルトのアプリケーションをエクスポートします。

と私の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"}] 
}]

以下の質問のようなものです：それは罰金コンパイルされます。それは

注意を解決するために.How「マップ未定義のプロパティを読み取ることができません」ブラウザにエラーを表示しますが、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の配列であるため、の単一のオブジェクトです。

この

{ 
    "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構造とthis.state.data.table.mapを使用しています。

出典

2017-02-23 13:34:39 dfsq

this.state.data.table.mapは正常に動作しません。 ./app/components/dataa.jsonのERRORこのファイルタイプを処理するには、適切なローダーが必要な場合があります。 SyntaxError：予期しないトークン（2：9） – James

ReactJS- JSON配列を読み取れません

答えて

関連する問題