我在响应本机中映射数据时遇到问题
王子
我是一名新开发人员，我试图在页面中显示数据，在ComponentDidMount中进行控制台操作时，我正在获取数据，但是在Jsx块中进行映射时却没有得到数据。映射的部分仅显示空白屏幕。任何帮助表示赞赏。
当我在componentDidMount中进行控制台操作时，在这里我可以获得数据输出：
constructor() {
super();
this.state = {
ordId: "",
orderId:"",
orderDetails:{},
loading: false
};
}
componentDidMount() {
this.setState({
loading: true
});
if(this.props.navigation.getParam("orderId", {})){
client.retreiveLastOrder(this.props.navigation.getParam("orderId", {})).then((data) => {
this.setState({
orderDetails: data
});
console.log('////////////////////////', data.line_items.length)
console.log(this.state.orderDetails.line_items[0].grams)
})}
this.setState({
loading: false
});
}
当我在jsx中映射相同的数据时，我没有得到任何数据：
{this.state.orderDetails.length > 0
? this.state.orderDetails.map((item, index) => {
return (
<Row
key={index}
style={{
borderBottomColor: Colors.buttonGreen,
paddingTop: 15
}}
>
<Col style={{ flex: 1, alignItems: "flex-end" }}>
<Text style={styles.TextProduct}>{item.quantity}X</Text>
</Col>
<Col
style={{
flex: 4,
paddingLeft: 15,
alignItems: "flex-start"
}}
>
<TouchableOpacity>
<View>
<Text style={styles.TextProduct}>{item.name}</Text>
</View>
</TouchableOpacity>
</Col>
<Col style={{ flex: 2, alignItems: "flex-end" }}>
<Text style={styles.TextProduct}>₹{item.price}</Text>
</Col>
</Row>
);
})
: null}
这是我页面的完整代码：-
export default class HelpPage extends Component {
constructor() {
super();
this.state = {
ordId: "",
orderId:"",
orderDetails:{},
loading: false
};
}
componentDidMount() {
this.setState({
loading: true
});
if(this.props.navigation.getParam("orderId", {})){
client.retreiveLastOrder(this.props.navigation.getParam("orderId", {})).then((data) => {
this.setState({
orderDetails: data
});
console.log('////////////////////////', data.line_items.length)
console.log(this.state.orderDetails.line_items[0].grams)
})}
this.setState({
loading: false
});
}
render() {
const { navigation } = this.props;
return (
<Container>
<Content padder>
<View
style={{ justifyContent: "space-between", flexDirection: "row" }}
>
<View
style={{
flex: 1,
}}
>
<Text style={styles.TextStyle2}>
Order #{this.state.orderDetails.order_number}{" "}
{/* {orderId} */}
</Text>
<Text>
<Text style={styles.TextStyle2}>
{this.state.orderDetails.presentment_currency} {this.state.orderDetails.total_price}{" "}
</Text>
{/* ({order.fulfillments[0].line_items.length} items) */}
</Text>
<Text style={styles.TextStyle4}> {this.state.orderDetails.processed_at} </Text>
<Text style={styles.TextProduct}> {this.state.orderDetails.gateway} </Text>
{/* <Text style={styles.TextProduct}> {order.line_items.title} </Text> */}
</View>
<View
style={{
flex: 1,
flexDirection: "column",
paddingLeft: 20,
paddingTop: 20
}}
>
<Button style={styles.buttonstyle} bordered success>
<TouchableOpacity onPress={() => this.props.navigation.navigate('HelpPage')} style={styles.TextStyle}>
<Text>Help</Text>
</TouchableOpacity>
</Button>
</View>
</View>
{this.state.orderDetails.length > 0
? this.state.orderDetails.map((item, index) => {
return (
<Row
key={index}
style={{
borderBottomColor: Colors.buttonGreen,
paddingTop: 15
}}
>
<Col style={{ flex: 1, alignItems: "flex-end" }}>
<Text style={styles.TextProduct}>{item.quantity}X</Text>
</Col>
<Col
style={{
flex: 4,
paddingLeft: 15,
alignItems: "flex-start"
}}
>
<TouchableOpacity>
<View>
<Text style={styles.TextProduct}>{item.name}</Text>
</View>
</TouchableOpacity>
</Col>
<Col style={{ flex: 2, alignItems: "flex-end" }}>
<Text style={styles.TextProduct}>₹{item.price}</Text>
</Col>
</Row>
);
})
: null}
<Divider style={{ backgroundColor: "grey", marginTop: 20 }} />
<Row style={{ flex: 1, height: 45 }}>
<Col style={{ paddingTop: 10, paddingLeft: 10 }}>
<Text style={styles.BillText}>BILL DETAILS</Text>
</Col>
</Row>
<Row style={{ borderBottomColor: Colors.buttonGreen }}>
<Col style={{ flex: 1, alignItems: "flex-end" }} />
<Col
style={{ flex: 4, alignItems: "flex-start", paddingBottom: 10 }}
>
<TouchableOpacity>
<View>
<Text style={styles.TextProduct1}>Total Items</Text>
</View>
</TouchableOpacity>
</Col>
<Col
style={{ flex: 1, alignItems: "flex-end", paddingBottom: 10 }}
>
<Text style={styles.GreenPriceText}>₹{this.state.orderDetails.name}</Text>
</Col>
</Row>
<Row style={{ borderBottomColor: Colors.buttonGreen }}>
<Col style={{ flex: 1, alignItems: "flex-end" }} />
<Col
style={{ flex: 4, alignItems: "flex-start", paddingBottom: 10 }}
>
<TouchableOpacity>
<View>
<Text style={styles.TextProduct1}>Tax</Text>
</View>
</TouchableOpacity>
</Col>
<Col
style={{ flex: 1, alignItems: "flex-end", paddingBottom: 10 }}
>
<Text style={styles.GreenPriceText}>₹{this.state.orderDetails.total_tax}</Text>
</Col>
</Row>
{/* <Row style={{ borderBottomColor: Colors.buttonGreen }}>
<Col
style={{ flex: 1, alignItems: "flex-end", paddingBottom: 5 }}
/>
<Col
style={{ flex: 5, alignItems: "flex-start", paddingBottom: 10 }}
>
<TouchableOpacity>
<View>
<Text style={styles.TextProduct1}>GST Taxes</Text>
</View>
</TouchableOpacity>
</Col>
<Col
style={{ flex: 1, alignItems: "flex-start", paddingBottom: 10 }}
>
<Text style={styles.GreenPriceText}>₹26.43</Text>
</Col>
</Row> */}
<Divider style={{ backgroundColor: "grey", marginTop: 20 }} />
<Row
style={{ borderBottomColor: Colors.buttonGreen, paddingTop: 15 }}
>
<Col style={{ flex: 4, alignItems: "flex-end" }}>
<Text style={{ color: Colors.buttonGreen, fontWeight: "500" }}>
Paid Via Gateway
</Text>
</Col>
<Col
style={{
flex: 4,
paddingRight: 5,
paddingBottom: 5,
alignItems: "center"
}}
>
<TouchableOpacity>
<View>
<Text style={styles.BillText}>TOTAL</Text>
</View>
</TouchableOpacity>
</Col>
<Col style={{ flex: 2, alignItems: "center" }}>
<Text
style={{
color: Colors.buttonGreen,
fontSize: 18,
fontWeight: "500"
}}
>
₹{this.state.orderDetails.total_price}
</Text>
</Col>
</Row>
<Row
size={30}
style={{
alignItems: "center",
height: 60,
justifyContent: "center",
paddingTop: 10
}}
>
<Button
style={{
textAlign: "center",
borderRadius: 10,
justifyContent: "center",
backgroundColor: Colors.buttonGreen,
flexBasis: "85%",
alignItems: "center",
height: 40
}}
>
<Text
style={{
textAlign: "center",
color: "#ffffff",
fontWeight: "bold"
}}
>
{" "}
Re Order{" "}
</Text>
</Button>
</Row>
{/* <Row style={styles.padding}>
<Col
style={{ flex: 4, paddingLeft: 30, justifyContent: "flex-start" }}
>
<View>
<Text style={styles.feedbackTitle}>
Give Your Valuable feedback
</Text>
<Text style={styles.TextStyle5}>
How likely are you to recommend
</Text>
</View>
</Col>
</Col>
</Row> */}
</Content>
</Container>
);
}
这是我正在获取的Json数据的图片。 
克里斯托斯·莱特拉斯（Christos Lytras）
在控制台输出处，您正在使用的data.line_items似乎是一个数组，并且将整个数据对象分配给而orderDetails不是line_items。你要么只分配data.line_items到orderDetails或映射orderDetails.line_items到您的JSX：
if(this.props.navigation.getParam("orderId", {})) {
client.retreiveLastOrder(this.props.navigation.getParam("orderId", {}))
.then((data) => {
this.setState({
orderDetails: data.line_items // Set orderDetails to the data.line_items array
});
console.log('////////////////////////', data.line_items.length)
console.log(this.state.orderDetails.line_items[0].grams)
});
}
或data.line_items用于JSX映射：
{this.state.orderDetails.line_items.length > 0
? this.state.orderDetails.line_items.map((item, index) => {
...
})
: null
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
IE 11中的FormData未定义
- 2
如何一次从多个文本框中获取值？
- 3
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 4
OpenCv：改变 putText() 的位置
- 5
Redux动作正常，但减速器无效
- 6
如何从JavaScript中的MP3文件读取元数据属性？
- 7
如何使用Redux-Toolkit重置Redux Store
- 8
将加号/减号添加到jQuery菜单
- 9
OpenGL纹理格式的颜色错误
- 10
获取并汇总所有关联的数据
- 11
超过时间限制错误C ++
- 12
ActiveModelSerializer仅显示关联的ID
- 13
在交互式Python Shell中获得最后结果
- 14
如何开始为Ubuntu开发
- 15
去噪自动编码器和常规自动编码器有什么区别？
- 16
Excel 2016图表将增长与4个参数进行比较
- 17
算术中的c ++常量类型转换
- 18
使用因子时如何在y轴上的ggplot中插入count或％
- 19
TreeMap中的自定义排序
- 20
如何在R中转置数据
- 21
在 React Native Expo 中使用 react-redux 更改另一个键的值
我来说两句