【问题标题】:Can't print data after passing it through props in react-native?通过 react-native 中的 props 传递数据后无法打印数据?
【发布时间】:2016-08-30 08:12:25
【问题描述】:

嘿,伙计们,我正在尝试将道具从一个场景传递到另一个场景我已经实现了将道具传递到所需场景 这就是我通过 renderScene 文件改变场景的方式

renderScene (route, navigator) {
    return React.createElement(route.component, {
      navigator: navigator, ...route.passProps
    })
  },

这是我传递道具的代码

modalButtonPress() {
    this.props.navigator.push({
        component: require('../Containers/blabla').default,
        passProps: {modalData: this.state.modalData}
    });
}

在其他文件中,我使用 this.props.modalData 调用它,而 props.modalData 用相同的数据返回给我

constructor (props) {
    super(props)
    this.state = {
        modalData: props.modalData,
    }
}

在控制台记录数据时,我可以在控制台中看到数据

但是当我尝试打印该数据时,我什么都看不到,屏幕是空白的 这是我的渲染方法。

render () {
    return (
      <View style={{justifyContent: 'flex-start'}}>
          <H3 style={styles.header}> {this.state.modalData._source.service_name}
          </H3>
          <Text style={styles.negativeMargin} >
              Type: <Text style={styles.bold}>{this.state.modalData._source.service_id}</Text>
          </Text>
      </View>
    )
  }

谁能指出我做错了什么,为什么数据没有在屏幕上呈现。我很困惑为什么数据没有打印出来。提前致谢。

【问题讨论】:

  • 试试 props.passProps.modalData 而不是 this.props.modalData
  • @BurakKarasoy props.passProps.modalData 不起作用,它说无法读取未定义的属性 modalData。
  • 尝试使用传递给构造函数的道具,即 props.modalData 而不是 this.props.modalData。你能控制台记录两者并告诉我吗?另外,你能多展示一些代码,比如你是如何切换场景和东西的吗?
  • @IrfanAyaz 我已经更新了问题并尝试使用 props.modalData 代替 this.props.modalData 但结果相同,我得到了对象。

标签: navigation react-native rendering fetch console.log


【解决方案1】:

console.log(this.state.modalData._source.service_name) 在您的渲染方法中是否正常工作(以确保您访问的是有效属性)?

您确定您的布局允许您的文本显示在屏幕上吗?例如,白色背景上没有白色字体或零宽度视图?经常发生!

【讨论】:

  • 记录我可以在控制台中看到数据。 console.log("你看到的是模态数据",this.state.modalData._source.service_name) .但是当我想渲染它时看不到任何数据 {this.state.modalData._source.service_name} 我已经删除了所有样式仍然看不到数据。
  • 那么您的布局比您的数据更有可能存在问题。删除所有样式是行不通的/不够的。你必须在右边的&lt;View /&gt; 上放一些flex: 1 才能让它成长。尝试使用检查器:facebook.github.io/react-native/docs/…
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-12-09
  • 1970-01-01
  • 2017-04-28
  • 1970-01-01
  • 1970-01-01
  • 2018-01-24
相关资源
最近更新 更多