Javascript 反应本机：.map（）函数不'；不要在渲染中显示任何内容_Javascript_Reactjs_React Native

Javascript 反应本机：.map（）函数不'；不要在渲染中显示任何内容

javascript reactjs react-native

Javascript 反应本机：.map（）函数不'；不要在渲染中显示任何内容,javascript,reactjs,react-native,Javascript,Reactjs,React Native,“从getData返回”函数未在渲染时显示。我在render函数中使用.map（）函数调用它，因为我正在迭代数据并显示视图，根据每个数据设置宽度和边距。您可以在下面看到完整的代码。我想知道我是否写错了？我检查了getData函数中的console.logs是否正确（请参阅完整代码）整个组件： import React from 'react' import { View, Text, ScrollView, Dimensions } from 'react-native' import sty

“从getData返回”函数未在渲染时显示。我在render函数中使用.map（）函数调用它，因为我正在迭代数据并显示视图，根据每个数据设置宽度和边距。您可以在下面看到完整的代码。我想知道我是否写错了？我检查了getData函数中的console.logs是否正确（请参阅完整代码）

整个组件：

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

从“React”导入React
从“react native”导入{View，Text，ScrollView，Dimensions}
从“./styles/UsageWeekStyle”导入样式
从“本机基”导入{Container，Left，Right，Body，List，ListItem}
从“时刻”导入时刻
从“react native easy Grid”导入{Col，Row，Grid}
导出默认类UsageWeek.Component{
getWidth=（总计）=>{
返回Math.floor（（总计/86400）*100.toString（）+'%'））
}
getData=（数据，键）=>{
const startTime=力矩（data.start）
log（矩（startTime）.format（'HH:mma'））
const ref=时刻（data.start）.startOf（'day'））
常数差异=开始时间差异（参考“秒”）
console.log（差异）
const total=data.total
console.log（总计）
const width=this.getWidth（总计）
const margin=this.getWidth（diff）
返回(
)
}
getTotal=（天）=>{
const usage=this.props.usage
设总数=0
用法.map（（数据）=>{
if（时刻（data.start）.day（）==天）{
总计=数据。总计
}
})
返回时刻。持续时间（总“秒”）。格式（'H:mm'）
}
渲染（）{
let dayOfWeek=['太阳'、'星期一'、'星期二'、'星期三'、'星期四'、'星期五'、'星期六']
const totalUsage=moment.duration（this.props.totalUsage，'seconds'）.format（'H:mm'））
const usage=this.props.usage
返回(
{totalUsage}
总计（小时）
全部的
下午12:00
下午2:00
下午四点
下午六点
晚上八点
晚上10:00
上午12:00
凌晨2点
凌晨四点
早上六点
上午八点
上午10:00
{
dayOfWeek.map（（day，i）=>{
返回(
{day}
{this.getTotal（i）}小时
{
用法.map（（数据）=>{
if（时刻（data.start）.day（）==i）{
if（data.details！==未定义）{
data.details.map（（数据，键）=>{
返回(
this.getData（数据，键）
)
})
}
}
})
}
)
})
}
)
}
}

您正在第二个和第三个嵌套的

.map（）

函数中重新分配

数据

变量

这可能不是问题所在，但它肯定会导致不希望出现的问题

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

我还将在

data.details.map（…）

方法中放置

调试器

或

控制台.log（）

，以确保它实际得到执行。

在代码的这一部分：

{
  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）”的函数内部返回

注意：尚未测试此代码

请尝试

返回用法。映射…

。好的，我将重命名。是的，它们实际上是用正确的数据执行的。正在执行此.getData函数。但是不返回OK，这将是@angel在他们的回答中所说的，您不会从第二个嵌套的

.map（）

中返回第三个嵌套的

.map（）

，就是这样！这就是答案。非常感谢你！！太好了，@chubbychu你能不能把这个答案设置为有效的，这样其他人就会认为它是好的

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

{
 usage.map((data) => {
  if (moment(data.start).day() === i) {
  if (data.details !== undefined) {
    return data.details.map((data, key) => {
      return (
        this.getData(data, key)
      )
     })
    }
  }
 })
}