ReactJS JSONデータを取得

Question

私のJSON data on this linkを見つけることができます。私が問題を抱えているのは、Reactからarticleデータを取得することです。

私のコードは以下の通りです。私はそれが完全に結果的ではないので、私の質問にJSON get要求コードを含めなかった。私はjQuery $ .getJSONメソッドを使ってfulldataの状態を配列に置き換えました。したがって、データは完全にfulldataの下にあるとします。この既存のコードは私が行うことができますどのような

getInitialState:function(){ 
    return { fulldata: {forthem:[ {articles: [] } ]} } 
}, 

viewer:function(){ 
    return (<ul> 
      {this.state.fulldata.forthem[0].articles.map(function(makeit, o){ 
       return <li key={o}>{makeit.article}</li>})} 
      </ul>) 
}, 

はemjayweb下の記事の最初のセットを獲得しています。しかし、コードをthis.state.fulldata.forthem[1]に変更すると、articlesの2番目のセットをcnnの下に取得できません。私はCannot read property map of undefinedエラーが発生します。

Answer 1

これを試してください...データを取得するために外部ループを使用する代わりに、配列のmapとreduce関数を使用します。

const articles = data.forthem.map(item => 
     item.articles.map(article => article) 
    ).reduce((list, current) => 
     list.concat(current) 
    ); 

以下の作業例...

const data = { 
 
    "forthem": [ 
 
     { 
 
      "therefore": "emjayweb", 
 
      "theresym": "emj", 
 
      "articles": [ 
 
       { 
 
        "number": "1", 
 
        "article": "How to Strengthen Your Password", 
 
        "url": "", 
 
        "pubdate": "" 
 
       }, { 
 
        "number": "2", 
 
        "article": "Second Article", 
 
        "url": "", 
 
        "pubdate": "" 
 
       } 
 
      ] 
 
     }, { 
 
      "therefore": "CNN", 
 
      "theresym": "cnn", 
 
      "articles": [ 
 
       { 
 
        "number": "3", 
 
        "article": "Work It", 
 
        "url": "", 
 
        "pubdate": "" 
 
       } 
 
      ] 
 
     } 
 
    ] 
 
}; 
 

 
class MyComponent extends React.Component { 
 
    render() { 
 
     return <div> 
 
      <h2>Articles</h2> 
 
      <ul> 
 
       {this.props.articles.map(item => <li key={item.number}>{item.article}</li>)} 
 
      </ul> 
 
     </div> 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      articles: [] 
 
     } 
 
    } 
 

 
    componentWillMount() { 
 
     const articles = data.forthem.map(item => 
 
      item.articles.map(article => article) 
 
     ).reduce((list, current) => 
 
      list.concat(current) 
 
     ); 
 

 
     this.setState({ articles }); 
 
    } 
 

 
    render() { 
 
     return <div> 
 
      <h1>React Demo</h1> 
 
      <MyComponent articles={this.state.articles}/> 
 
     </div> 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>