Question

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>
    )
  }
}

Answer 1

在这部分代码中：

{
  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）”的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)
      )
     })
    }
  }
 })
}

注意：尚未测试此代码

Answer 2

您要在第二个和第三个嵌套data函数中重新分配.map()变量。

这可能不是问题，但肯定会引起不良问题。

首先，我将重新命名这些参数。

我还会在debugger方法中添加console.log()或data.details.map(...)，以确保它实际上已被执行。

React Native：.map（）函数在Render中不显示任何内容

2 个答案: