在React中state的定义中有一个坑不易被发现,主要是state属性未被定义就是使用,需要用到三位运算符:
举个栗子:
class App extends Component{
this.state={
}
componentDidMount(){
请求后端接口拿到数据data,data是一个对象数组
}
// 然后将data保存在当前状态之中
this.setState({
data:DataTransferItem
})
// 渲染到页面上
render(){
return(
<div>
{this.state.data[0].name}
</div>
)
}
}
是会报错的,原因有几点:
- render在componentDidMount之前运行,此时state中没有data
- 就算定义初始时状态
data:[]
,还是会报错的,只加这一个还不够。此时this.state.data
是一个空数组,获取不到this.state.data[0].name
,渲染到页面上的时候还是会报错。
代码需要改进,主要是两个方面:
- 初始state定义
- 用三元运算符判断
state.data
class App extends Component{
this.state={
data:[]
}
componentDidMount(){
请求后端接口拿到数据data,data是一个对象数组
}
// 然后将data保存在当前状态之中
this.setState({
data:DataTransferItem
})
// 渲染到页面上
render(){
return(
<div>
{this.state.data.length!==0?this.state.data[0].name:''}
</div>
)
}
}
总结:代码要规范,初始状态要定义,数据为空要判断。