解析JSON在阵营组件

我的工作我的第一个实验反应，试图消耗，并通过一个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进行了评估所有的项目都被加载了吗？还是我仍然误解了这个问题，如果是这样，我在渲染数据时做错了什么？

来源

2016-12-04 Joe Fusaro

您的问题是.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; })

来源

2016-12-04 18:57:48

谢谢，我删除了的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 –

解析JSON在阵营组件

回答

相关问题