2016-12-04 77 views
2

我的工作我的第一個實驗反應,試圖消耗,並通過一個API,我也寫了顯示一些數據(使用Django的REST框架)解析JSON在陣營組件

我看到的物體填充控制檯,但它們不會在頁面上呈現。我也看到錯誤在控制檯:

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined

這指的是在我的變更列表組件線#18:

\t import React from 'react'; 
 

 

 
\t class ChangeList extends React.Component { 
 
\t \t constructor() { 
 
\t \t super(); 
 
\t \t \t this.state={items:[]}; 
 
\t } 
 
\t componentDidMount(){ 
 
\t \t fetch(`http://127.0.0.1:8000/backup/changes/1/Lead.json`) 
 
\t \t \t .then(result=>result.json()) 
 
\t \t \t .then(items=>console.log(items)) 
 
\t  .then(items=>this.setState({items})) 
 
\t } 
 
\t render() { 
 
\t \t return(
 
\t  \t <ul> 
 
\t   {this.state.items.length ? 
 
\t   \t this.state.items.map(item => <li> {item} </li>) 
 
\t    : <li>Loading...</li> 
 
\t   } 
 
\t  </ul> 
 
\t ) 
 
\t } 
 
\t } 
 

 
\t export default ChangeList
<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>

那麼,如何重整這個陣營組件,以便在之後,對這個.state.items.length進行了評估所有的項目都被加載了嗎?還是我仍然誤解了這個問題,如果是這樣,我在渲染數據時做錯了什麼?

回答

3

您的問題是.then(items=>console.log(items)),因爲console.log()返回undefined

undefined返回時,此行.then(items=>this.setState({items}))將狀態設置爲{ items: undefined },並且this.state.items沒有長度屬性。

只需卸下console.log()語句或將其更改爲:

.then(items=> { console.log(items); return items; }) 
+0

謝謝,我刪除了的console.log()語句如你所說,但仍然沒有在瀏覽器中呈現。另外,沒有輸出到控制檯。如果我用你所建議的修改(.then(items => {console.log(items); return items;}))添加了console.log()語句,那麼這些對象會記錄到控制檯,控制檯中的錯誤(只是JSON對象),但仍然沒有在UI中呈現。 –

+0

渲染中顯示的console.log(this.state)是什麼? –

+0

我將console.log(this.state)添加到渲染函數(不知道我是否正確執行此操作?https://gist.github.com/joefusaro/4e09d0949e80dcbb1a02e01405dbc360),現在我看到以下內容:http:/ /imgur.com/a/C0SgG –