getData函数的返回不会在渲染时显示。我使用.map（）函数在渲染函数中调用它，因为我正在迭代数据并显示视图，根据每个数据设置宽度和边距。您可以在下面看到完整的代码。我想知道我写错了吗？我检查了getData函数中的console.logs是否正确（参见完整代码）。
getData = (data, key) => {
return (
<View key={key} style={[styles.bar, { width: '100%'}, { marginLeft: '0%'}]} />
)
}
从渲染：
{
usage.map((data) => {
if (moment(data.start).day() === i) {
if (data.details !== undefined) {
data.details.map((data, key) => {
return (
this.getData(data, key)
)
})
}
}
})
}
整个组件：
import React from 'react'
import { View, Text, ScrollView, Dimensions } from 'react-native'
import styles from './Styles/UsageWeekStyle'
import { Container, Left, Right, Body, List, ListItem } from 'native-base'
import moment from 'moment'
import { Col, Row, Grid } from 'react-native-easy-grid'
export default class UsageWeek extends React.Component {
getWidth = (total) => {
return Math.floor(((total / 86400) * 100).toString() + '%')
}
getData = (data, key) => {
const startTime = moment(data.start)
console.log(moment(startTime).format('HH:mm A'))
const ref = moment(data.start).startOf('day')
const diff = startTime.diff(ref, 'seconds')
console.log(diff)
const total = data.total
console.log(total)
const width = this.getWidth(total)
const margin = this.getWidth(diff)
return (
<View key={key} style={[styles.bar, { width: width}, { marginLeft: margin}]} />
)
}
getTotal = (day) => {
const usage = this.props.usage
let total = 0
usage.map((data) => {
if (moment(data.start).day() === day) {
total = data.total
}
})
return moment.duration(total, 'seconds').format('H:mm')
}
render () {
let dayOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const totalUsage = moment.duration(this.props.totalUsage, 'seconds').format('H:mm')
const usage = this.props.usage
return (
<View style={styles.container}>
<Container>
<List>
<ListItem style={styles.listitem}>
<Left />
<Body>
<Text style={styles.timeInfoHeader}>{totalUsage}</Text>
<Text style={styles.timeInfoSubHeader}>Total (hrs)</Text>
</Body>
<Right />
</ListItem>
</List>
<ScrollView horizontal style={styles.scrollContainer}>
<Grid style={[{ width: Dimensions.get('window').width + 800 }, { backgroundColor: 'white' }]}>
<Row style={[{ marginTop: 10 }, styles.rowLabel]}>
<Col size={1 / 27} />
<Col size={2 / 27} style={{ marginLeft: 10 }}><Text>Total</Text></Col>
<Col size={2 / 27}><Text>12:00PM</Text></Col>
<Col size={2 / 27}><Text>2:00PM</Text></Col>
<Col size={2 / 27}><Text>4:00PM</Text></Col>
<Col size={2 / 27}><Text>6:00PM</Text></Col>
<Col size={2 / 27}><Text>8:00PM</Text></Col>
<Col size={2 / 27}><Text>10:00PM</Text></Col>
<Col size={2 / 27}><Text>12:00AM</Text></Col>
<Col size={2 / 27}><Text>2:00AM</Text></Col>
<Col size={2 / 27}><Text>4:00AM</Text></Col>
<Col size={2 / 27}><Text>6:00AM</Text></Col>
<Col size={2 / 27}><Text>8:00AM</Text></Col>
<Col size={2 / 27}><Text>10:00AM</Text></Col>
</Row>
{
dayOfWeek.map((day, i) => {
return (
<Row key={i} style={styles.rowLabel}>
<Col size={1 / 27}><Text style={[styles.colLabel, { marginTop: 5 }]}>{day}</Text></Col>
<Col size={2 / 27}><Text style={[styles.colLabel, { marginTop: 5 }, { color: 'rgba(99, 99, 99, 100)' }]}>{this.getTotal(i)} hrs</Text></Col>
<Col size={24 / 27}>
<View style={[{ flex: 1 }, { flexDirection: 'row' }]}>
{
usage.map((data) => {
if (moment(data.start).day() === i) {
if (data.details !== undefined) {
data.details.map((data, key) => {
return (
this.getData(data, key)
)
})
}
}
})
}
</View>
</Col>
</Row>
)
})
}
</Grid>
</ScrollView>
</Container>
</View>
)
}
}
在这部分代码中：
{
usage.map((data) => {
if (moment(data.start).day() === i) {
if (data.details !== undefined) {
data.details.map((data, key) => {
return (
this.getData(data, key)
)
})
}
}
})
}
你从“data.detailst.map（... func）”的函数内部返回，然后你必须从“usage.map（... func）”的函数内部返回
{
usage.map((data) => {
if (moment(data.start).day() === i) {
if (data.details !== undefined) {
return data.details.map((data, key) => {
return (
this.getData(data, key)
)
})
}
}
})
}
注意：没有测试此代码
您在第二个和第三个嵌套的data函数中重新分配.map()变量。
这可能不是问题，但肯定会引起不良问题。
首先，我将重新命名这些参数。
我还会在你的debugger方法中加入console.log()或data.details.map(...)，以确保它实际上已被执行。