ReactJS獲取JSON數據

你可以找到我的JSON data on this link。我遇到麻煩的是從React獲取article數據。ReactJS獲取JSON數據

我的代碼如下。我沒有在我的問題中包含JSON獲取請求代碼，因爲它並不完全相應。我使用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的第二組articles,cnn。我收到一個Cannot read property map of undefined錯誤。

來源

2016-11-22 abrahamlinkedin

我會建議都搬進了較小的變量和函數爲清楚起見，您可以在發生了什麼調試的每一步驗證。嘗試在'返回'之前在'viewer'函數中放置一個'debugger'語句 –

你試圖一次顯示所有來自'emjayweb'和'cnn'的文章列表，或者在事件之後顯示一組文章的onClick？ – jpdelatorre

@jpdelatorre這都是要在頁面加載時呈現。我沒有在這個問題中包含我的渲染函數。基本上我想要的是顯示所有文章，但是我無法顯示'cnn'，因爲將我的'[0]'更改爲'[1]'到我的映射語句不起作用。 – abrahamlinkedin

試試這個...因此，我們使用數組的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>

來源

2016-11-22 22:37:56 jpdelatorre

ReactJS獲取JSON數據

回答

相關問題