[英]Unhandled JS Exception: TyperError: undefined is not an object (evaluating '_this.onPress.bind')
I'm trying to make a button in React Native using TouchableOpacity's onPress. 我正在尝试使用TouchableOpacity的onPress在React Native中创建一个按钮。 I got it working before, but now that I added some extra functionality in the function 'like', it does not work anymore. 我以前可以使用它,但是现在我在“喜欢”函数中添加了一些额外的功能,它不再起作用。
The onPress should give an argument with the function. onPress应使用函数提供参数。
I get the Error Unhandled JS Exception: TyperError: undefined is not an object (evaluating '_this.onPress.bind')
in my iOS simulator. 我收到错误Unhandled JS Exception: TyperError: undefined is not an object (evaluating '_this.onPress.bind')
我的iOS模拟器中Unhandled JS Exception: TyperError: undefined is not an object (evaluating '_this.onPress.bind')
。
My code: 我的代码:
export default class App extends Component { constructor(props) { super(props) this.state = { liked: [false, false, false] } this.onPress = this.onPress.bind(this) } like = (id) => { const liked = this.state.liked liked[id] = !liked[id] this.setState({ liked: [!this.state.liked[0], false, false ], }); } render() { return ( <Swiper style={SliderStyles.wrapper} showsButtons={false}> <View style={SliderStyles.slide1}> <View style={CardStyles.card}> <View style={CardStyles.card_img} > <Image source={require('./recources/ny.jpg')} style={CardStyles.images}/> </View> <View style={CardStyles.card_details}> <Text style={TextStyles.card_title} >New York</Text> <View style={CardStyles.card_action}> <TouchableOpacity style={CardStyles.card_button} onPress={() => this.like(0)}> <Image source={ this.state.liked[0] === true ? require('./recources/icons/heart_closed.png') : require('./recources/icons/heart_open.png') } style={CardStyles.card_button_img}/> </TouchableOpacity> </View> <Text style={TextStyles.card_name}>Seppe De Langhe</Text> </View> </View> </View> </View> </Swiper> ); } }
Picture of what my iOS simulator looks like 我的iOS模拟器的外观图片
Thanks for the help! 谢谢您的帮助!
Looks like you don't have an onPress
method to bind, your method is called like
and because you're using an arrow function it's already bound. 似乎您没有要绑定的onPress
方法,您的方法被称为like
并且因为您使用的是箭头函数,所以该方法已被绑定。
export default class App extends Component { state = { liked: [false, false, false], }; like = (id) => { this.setState(state => { state.liked[id] = !state.liked[id]; return state; }); } render() { return ( <Swiper style={SliderStyles.wrapper} showsButtons={false}> <View style={SliderStyles.slide1}> <View style={CardStyles.card}> <View style={CardStyles.card_img} > <Image source={require('./recources/ny.jpg')} style={CardStyles.images}/> </View> <View style={CardStyles.card_details}> <Text style={TextStyles.card_title} >New York</Text> <View style={CardStyles.card_action}> <TouchableOpacity style={CardStyles.card_button} onPress={() => this.like(0)}> <Image source={ this.state.liked[0] === true ? require('./recources/icons/heart_closed.png') : require('./recources/icons/heart_open.png') } style={CardStyles.card_button_img}/> </TouchableOpacity> </View> <Text style={TextStyles.card_name}>Seppe De Langhe</Text> </View> </View> </View> </View> </Swiper> ); } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.