//组件渲染完毕时调用此方法
componentDidMount(){
//get方法，只填写url参数
fetch('http://192.168.71.150:3000/json/commondity.json')
//上面一行会返回响应对象，即response
.then((response)=>response.json())
//response.json()将返回一个json类型对象
.then((json)=>{
this.setState({source:json});
//注意我们在Promise调用链的最后调用了done() —— 这样可以抛出异常而不是简单忽略。
}).done();
}
以上then()方法是promise调用链中的回调方法
在此发现一个坑！
constructor(props){
super(props);
this.state={
source:{},
single:0,
};
}
在上面的fetch回调方法中，我们将从服务端获取的数据以json对象类型放到state中的source变量中，问题就出在这里！如果我们要从source中获取数据，用如下语句this.state.source[0].id来获取id值会报错。（此处json数据为数组）
原因:
source:{},
由于初始赋值为{},而在setState()之前就用到this.state.source[0].id,此时source不是数组，也没有id这个字段,{}只是undefined
注:setState语句在componentDidMount()时才执行，而this.state.source[0].id在componentWillMount()时就执行
解决方案:
source赋值为初始调用语句的对应结构
接着第二个问题
JSX语法之谜
错误写法
return(
<View style={styles.container}>
{ var list = [];
for (var i in this.state.source){
var Row = (
<Text key={i}>{this.state.source[i].title}</Text>
)
list.push(Row);
}
}
{list}
</View>
)
以上写法严重错误，{}中应该是属性表达式，更直观的说应该是已经定义好的变量。{}中可以使用条件表达式(？：)
网友评论