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進行了評估所有的項目都被加載了嗎?還是我仍然誤解了這個問題,如果是這樣,我在渲染數據時做錯了什麼?
謝謝,我刪除了的console.log()語句如你所說,但仍然沒有在瀏覽器中呈現。另外,沒有輸出到控制檯。如果我用你所建議的修改(.then(items => {console.log(items); return items;}))添加了console.log()語句,那麼這些對象會記錄到控制檯,控制檯中的錯誤(只是JSON對象),但仍然沒有在UI中呈現。 –
渲染中顯示的console.log(this.state)是什麼? –
我將console.log(this.state)添加到渲染函數(不知道我是否正確執行此操作?https://gist.github.com/joefusaro/4e09d0949e80dcbb1a02e01405dbc360),現在我看到以下內容:http:/ /imgur.com/a/C0SgG –