由于收藏不需要外部变量的传入,所以不作为this.props的组件,从而声明在this.state中,而且有一个默认值,标示不选中

错误案例:、

这是初始化代码:

constructor(props){
super(props);
this.state={
isFavorite:false,
favoriteIcon:require('../../res/images/ic_unstar_transparent.png')
}
}

这是收藏按钮被点击时触发的代码:

let isFavorite=!this.state.isFavorite;

let favoriteButton=<TouchableOpacity
onPress={()=>{
this.setState({
isFavorite:isFavorite,
favoriteIcon:this.state.isFavorite?require('../../res/images/ic_star.png')
:require('../../res/images/ic_unstar_transparent.png')

})
alert(this.state.isFavorite);
}}

上述的onPress实现的逻辑是错误的,其原因在于不了解state的属性机制,如果想修改state中的属性,下面是个典型错误范例:

this.state.isFavorite= !this.state.isFavorite----->state中的属性是不能通过赋值而被修改的

正确姿势:

let isFavorite= ! this.state.isFavorite;

this.setState({

isFavorite: isFavorite

})

错误案例: 

this.setState({

isFavorite: ! this.state.isFavorite             ---------------1

favoriteIcon:this.states.isFavorite?require('../ic_star.png') :require('../ic_unstar.png')     ----------------2

})

注意上面的-1看似修改了isFavorite, 那么-2使用this.states.isFavorite应该是修改后的值,其实不是的!!!!

为了防止出现这种state修改错乱,我们规定在setState中不要使用this.state


注意如果写成this.setState={}是不会报错的,但也就不生效了!