@H_
403_0@
我正在学习React Native和Redux,我在这里遇到了许多类似的问题,但我很难与我的问题联系起来.
@H_
403_1@当我在另一个
方法中
调用一个
方法时,它会不断地返回我这个
函数’不是
函数,我真的不知道该怎么做.
@H_
403_1@这是我的一些
代码..
import React,{ Component } from 'react';
import { Text,StyleSheet,ScrollView } from 'react-native';
import { connect } from 'react-redux';
import Panel from '../components/panel';
class Orders extends Component {
displayItems(obj) {
console.log('itemArr',obj);
return obj.items.map(function(item){
return (<Text>{item.quantity + ' ' + item.name}</Text>)
});
}
renderContents() {
console.log('orders',this.props.orders);
if (!this.props.orders) {
return <Text>Loading...</Text>;
}
return this.props.orders.map(function(order) {
return (
<Panel title={order.id} key={order.id}>
<Text>
Item: {this.displayItems(order)}{'\n'}
</Text>
</Panel>
);
});
}
render() {
return(
<ScrollView style={styles.container}>
{this.renderContents()}
</ScrollView>
);
}
}
@H_
403_1@我不确定为什么render
方法中的
函数不会导致任何
错误,但我的renderContents
方法中的
函数调用确实如此.
@H_
403_1@我很感激任何
解决这个问题的建议.
这是一个约束性问题.除非另有明确说明,否则JavaScript中的
函数都有自己的上下文,所以当你这样做时
return this.props.orders.map(function(order) {
return (
<Panel title={order.id} key={order.id}>
<Text>Item: {this.displayItems(order)}{'\n'}</Text>
</Panel>);
});
@H_
403_1@这不是指向你的类,而是指向
函数本身.请执行以下操作
return this.props.orders.map((order) => {
return (
<Panel title={order.id} key={order.id}>
<Text>Item: {this.displayItems(order)}{'\n'}</Text>
</Panel>);
});
@H_
403_1@箭头
函数没有自己的上下文,所以这应该适合你.您也可以拨打
bind,但我认为箭头
功能解决方案更简单.
