Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >错误:无法读取未定义的React本机的属性“push”

错误:无法读取未定义的React本机的属性“push”
EN

Stack Overflow用户
提问于 2015-09-21 05:30:14
回答 3查看 6.3K关注 0票数 4

我目前正在尝试根据本教程学习React:http://www.appcoda.com/react-native-introduction/

在复制大部分代码(文本中的小改动)时,我得到了以下错误:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Error: Cannot read property 'push' of undefined

如果我试图推送一个新的Navigator视图,则会发生此错误。下面是条形代码(最后是完整的代码,但认为这里只有一个简短的版本更易读):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<TouchableHighlight onPress={() => this._rowPressed(eve)} >



    _rowPressed(eve) {
  this.props.navigator.push({
    title: "Property",
    component: SingleEvent,
    passProps: {eve}
  });
}

也许有人可以解释为什么this.props.navigator是未定义的,以及我如何使用它。对于这个基本问题,我很抱歉,但是我找了很多,还没有找到这个问题的答案。我尝试使用.bind(这个)到_rowPressed函数,并将所有内容重写为NavigatorIOS视图,但都没有工作。

如果有人能解释给我听就好了。

最棒的丹尼尔

全错误报告:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Error: Cannot read property 'push' of undefined
 stack: 
  Dates._rowPressed                                      index.ios.bundle:52051
  Object._createClass.value.React.createElement.onPress  index.ios.bundle:52033
  React.createClass.touchableHandlePress                 index.ios.bundle:41620
  TouchableMixin._performSideEffectsForTransition        index.ios.bundle:39722
  TouchableMixin._receiveSignal                          index.ios.bundle:39640
  TouchableMixin.touchableHandleResponderRelease         index.ios.bundle:39443
  executeDispatch                                        index.ios.bundle:15431
  forEachEventDispatch                                   index.ios.bundle:15419
  Object.executeDispatchesInOrder                        index.ios.bundle:15440
  executeDispatchesAndRelease                            index.ios.bundle:14793
 URL: undefined
 line: undefined
 message: Cannot read property 'push' of undefined

父视图的代码,它通过TabBarIOS包含到主视图中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    'use strict';

var React = require('react-native');
var singleEvent = require('./singleEvent');
var REQUEST_URL = 'http://***/dates/24-09-2015.json';



var {
    Image,
    StyleSheet,
    Text,
    View,
    Component,
    ListView,
    NavigatorIOS,
    TouchableHighlight,
    TabBarIOS,
    ActivityIndicatorIOS
} = React;


var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        padding: 10
    },
    thumbnail: {
        width: 53,
        height: 81,
        marginRight: 10
    },
    rightContainer: {
        flex: 1
    },
    title: {
        fontSize: 16,
        marginBottom: 8
    },
    author: {
        color: '#656565',
        fontSize: 12
    },
    separator: {
       height: 1,
       backgroundColor: '#dddddd'
   },
   listView: {
       backgroundColor: '#F5FCFF'
   },
   loading: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center'
   }   
});

class Dates extends Component {

  constructor(props) {
      super(props);

      this.state = {
        isLoading: true,
        dataSource: new ListView.DataSource({
           rowHasChanged: (row1, row2) => row1 !== row2
        })
      };
    }


    componentDidMount() {
       this.fetchData();
    }

    fetchData() {
       fetch(REQUEST_URL)
       .then((response) => response.json())
       .then((responseData) => {
           this.setState({
               dataSource: this.state.dataSource.cloneWithRows(responseData),
               isLoading: false
           });
       })
       .done();
    }

      render() {
       if (this.state.isLoading) {
           return this.renderLoadingView();
       }

       return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderEvent.bind(this)}
                style={styles.listView}
                />
        );
      }  
    renderLoadingView() {
        return (
            <View style={styles.loading}>
                <ActivityIndicatorIOS size='large'/>
                <Text>Loading Events...</Text>
            </View>
        );
    }

    renderEvent(eve) {
       return (
            <TouchableHighlight onPress={() => this._rowPressed(eve).bind(this)}  underlayColor='#dddddd'>
                <View>
                    <View style={styles.container}>
                        <View style={styles.rightContainer}>
                            <Text style={styles.title}>{eve.value.name}</Text>
                            <Text style={styles.author}>{eve.value.location}</Text>
                        </View>
                    </View>
                    <View style={styles.separator} />
                </View>
            </TouchableHighlight>
       );
    }

    _rowPressed(eve) {

      console.log(eve, this.props);

      this.props.navigator.push({
        title: "Property",
        component: SingleEvent,
        passProps: {eve}
      });
    }
}
module.exports = Dates;

单击ListView时应包含的单个视图:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
'use strict';

var React = require('react-native');

var {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicatorIOS,
  Image,
  Component
} = React;

var styles = StyleSheet.create({
    description: {
        fontSize: 16,
        backgroundColor: 'white'
    },
    title : {
        fontSize : 22
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

class SingleEvent extends Component {
    render() {
        var eve = this.props.eve;
        var description = (typeof eve.value.description !== 'undefined') ? eve.value.description : '';
        return (
            <View style={styles.container}>
                <Text style={styles.title}>{eve.value.name}</Text>
                <Text style={styles.description}>{description}</Text>
            </View>
        );
    }
}

module.exports = SingleEvent;

将所有视图组合在一起的index.ios.js:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
'use strict';

var React       = require('react-native');
var Dates       = require('./Dates');
//var Eventlist       = require('./eventlist');
var NearYou     = require('./NearYou');

var icons         = [];
icons['place']    = require('image!ic_place_18pt');
icons['reorder']  = require('image!ic_reorder_18pt');
icons['grade']    = require('image!ic_grade_18pt');
icons['people']   = require('image!ic_group_18pt');

var {
    Image,
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView, 
    TouchableHighlight,
    TabBarIOS,
    Component
} = React;

class allNightClub extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'dates'
        };
    }

    render() {
        return (
            <TabBarIOS selectedTab={this.state.selectedTab}>
                <TabBarIOS.Item
                    selected={this.state.selectedTab === 'dates'}
                    icon={icons['reorder']}
                    title= 'Events'
                    onPress={() => {
                        this.setState({
                            selectedTab: 'dates'
                        });
                    }}>
                    <Dates navigator={navigator} />
                </TabBarIOS.Item>
               <TabBarIOS.Item
                    selected={this.state.selectedTab === 'nearyou'}
                    title= 'Favorites'
                    icon={icons['grade']}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'nearyou'
                        });
                    }}>
                    <NearYou navigator={navigator} />
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    selected={this.state.selectedTab === 'nearyou'}
                    title= 'Near You'
                    icon={icons['place']}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'nearyou'
                        });
                    }}>
                    <NearYou navigator={navigator} />
                </TabBarIOS.Item> 
                <TabBarIOS.Item
                    selected={this.state.selectedTab === 'nearyou'}
                    title= 'People'
                    icon={icons['people']}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'nearyou'
                        });
                    }}>
                    <NearYou navigator={navigator} />
                </TabBarIOS.Item> 
            </TabBarIOS>
        );
    }
}

AppRegistry.registerComponent('allNightClub', () => allNightClub);
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-09-21 10:03:54

在您的index.ios.js中,您在这里引用的是未设置的导航器。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Dates navigator={navigator} />

因此,正如我所理解的,您必须选择使用NavigatorIOS:

1. NavigatorIOS作为Tab的孩子

您需要将导航器定义为TabViewItems的子程序,它本身加载适当的视图:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

<TabBarIOS.Item>
<NavigatorIOS
    style={styles.container}
    initialRoute={{
        title: 'Dates',
        component: Dates,
    }}
/>
</TabBarIOS.Item>

2. NavigatorIOS作为根元素

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class allNightClub extends Component {

  render() {
        return (
            <NavigatorIOS
                style={styles.container}
                initialRoute={{
                  title: 'Index',
                  component: Index
                }}
            />
        );
    }
}

对我来说是这样的。我将index.ios.js的原始代码放入Index.js中,并做了以下更改:

Index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Dates
    navigator={this.props.navigator}
/>

Dates.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<TouchableHighlight onPress={() => this._rowPressed(eve)}  underlayColor='#dddddd'>
票数 4
EN

Stack Overflow用户

发布于 2015-09-21 07:48:54

据我所能推断,您对this.props.navigator的调用应该有效,即使没有bind-语句。

我的第一个想法是:导航项是否从其父组件传递给您的日期组件?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
return (
  <Dates
    navigator={navigator}
    ... />

可能在渲染场景函数中呈现导航器。

控制台语句中的输出是什么样子的?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log(eve, this.props)
票数 1
EN

Stack Overflow用户

发布于 2016-01-16 10:55:17

我今天遇到了这个问题,原因是您需要调用使用this.props.navigator.push和NavigatorIOS组件的屏幕。这将设置导航仪支柱。例如。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<NavigatorIOS
    style={styles.container}
    initialRoute={{
    title: '',
    component: DemoScreen
  }}
/>

现在在您的DemoScreen中,您可以使用this.props.navigator

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32696564

复制
相关文章
持续集成之代码质量管理———Sonar
Sonar是一个用于代码质量管理的开放平台,通过插件机制,Sonar可以集成不同的测试工具、代码分析工具以及持续集成工具。与持续集成工具(如Hudson/Jenkins等)不同,Sonar并不是简单地把不同代码检查结果(例如:FindBugs、PMD等)直接显示在web UI界面上,而是通过不同的插件对这些结果再加工处理,通过量化的方式度量代码质量的变化,从而可以方便地对不同规模和种类的工程进行代码质量管理。
小手冰凉
2020/03/23
9030
持续集成之代码质量管理———Sonar
【DB笔试面试511】如何在Oracle中写操作系统文件,如写日志?
可以利用UTL_FILE包,但是,在此之前,要注意设置好UTL_FILE_DIR初始化参数。
AiDBA宝典
2019/09/30
28.8K0
【DB笔试面试511】如何在Oracle中写操作系统文件,如写日志?
Jenkins+SonarQube代码审查
如果出现“Error while downloading plugin ‘l10nzhtw’ with version ‘1.0’. No compatible plugin found.”错误,那说明版本不兼容,可到官网查找对应版本的插件放到…/…/extensions/plugins目录下,重新启动sonar服务【使用命令…/…/sonar.sh start 也可以通过页面操作“配置->系统->重启服务器”】,即可生效。但如果安装的插件比当前版本低的话,会出现部分显示还是英文。
大忽悠爱学习
2022/09/26
1.2K0
Jenkins+SonarQube代码审查
向容器中填充元素---fill
利用fill可以将容器区间填充为指定的值 属于算术生成算法一类的小型算法-----需要包含头文件numeric
大忽悠爱学习
2021/03/02
6400
向容器中填充元素---fill
持续集成之整合Jenkins与代码质量管理平台Sonar并实现构建失败邮件通知
一:Sonar是什么? Sonar 是一个用于代码质量管理的开放平台,通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具。与持续集成工具(例如 Hudson/Jenkins 等)不同,Sonar 并不是简单地把不同的代码检查工具结果(例如FindBugs,PMD等)直接显示在Web页面上,而是通过不同的插件对这些结果进行再加工处理,通过量化的方式度量代码质量的变化,从而可以方便地对不同规模和种类的工程进行代码质量管理。在对其他工具的支持方面,Sonar 不仅提供了对 IDE 的支持,可以在 Eclipse 和 IntelliJ IDEA 这些工具里联机查看结果;同时Sonar还对大量的持续集成工具提供了接口支持,可以很方便地在持续集成中使用 Sonar,此外,Sonar 的插件还可以对 Java 以外的其他编程语言提供支持,对国际化以及报告文档化也有良好的支持。
星哥玩云
2022/07/24
8920
持续集成之整合Jenkins与代码质量管理平台Sonar并实现构建失败邮件通知
ThinkPHP中自动填充日期时间
如果是用自己的函数那就要用callback,第二个参数默认当前模块能调用的方法;用function的话第二个参数为函数名,而这个函数可以是PHP自带的,也可以是你自己写的
PM吃瓜
2019/08/13
1.4K0
Jenkins+Ansible+GitLab持续交付平台搭建-第7篇
这篇文章将继续给大家介绍Jenkins+Ansible+GitLab持续交付平台搭建。
TestOps
2022/04/07
9450
Jenkins+Ansible+GitLab持续交付平台搭建-第7篇
git命令中带有特殊符号如@
使用带用户密码clone的方式: git clone https://username:password@remote 当username和password中含有特殊符号会导致出错, 因为为http的请求,所以需要将特殊符号encode成url格式的 java使用: String c = java.net.URLEncoder.encode(".","utf-8"); System.out.println(c); 源文档 <http://blog.csdn.net/qq1142003960/article/
千往
2018/01/24
2.1K0
Numpy中的填充,np.pad()
在卷积神经网络中,为了避免因为卷积运算导致输出图像缩小和图像边缘信息丢失,常常采用图像边缘填充技术,即在图像四周边缘填充0,使得卷积运算后图像大小不会缩小,同时也不会丢失边缘和角落的信息。在Python的numpy库中,常常采用numpy.pad()进行填充操作,具体分析如下:
种花家的奋斗兔
2020/11/13
2K0
Numpy中的填充,np.pad()
InfoPath中repeationg section动态填充数据
项目后台使用的是基于InfoPath的后台管理系统。后台主要是生成CMS系统需要的XML文件,但是有的内容和其他的内容有关联。为了减少编辑人员的操作难度,所有相关的内容,都需要自定义开发InfoPat
八哥
2018/01/18
1.1K0
InfoPath中repeationg section动态填充数据
填充图画图片_脂肪填充失败
#图片处理-填充图片-numpy.pad 参考博客1 参考博客2 np.pad() 常用于深度学习中的数据预处理(例如用于图片处理中填充图片),可以将numpy数组按指定的方法填充成指定的形状。
全栈程序员站长
2022/09/22
1.4K0
填充图画图片_脂肪填充失败
Openlayers4中图片填充的实现
概述 本文讲述如何在Openlayers实现面状要素的图片填充。 实现后 实现代码 var bounds = [73.4510046356223, 18.1632471876417, 134.
牛老师讲GIS
2018/10/23
2K0
Openlayers4中图片填充的实现
绑定事件中 如可控制函数的执行次数
var flag = true; function onlyOne() { if(flag) { "这里是要执行的代码"; } flag = false//该方法是控制函数仅执行一次 因为flag是全局变量 onlyOne()函数执行一次后flag就变成false了 函数就执行不了了
大当家
2018/06/28
2.3K0
Excel – 填充柄(Fill Handle)- 双击填充柄
填充柄是一个位于单元格右下角的小黑色方块,用于快速填充相邻单元格的数据或序列。见图:
收心
2023/08/24
1.8K0
Excel – 填充柄(Fill Handle)- 双击填充柄
dataframe填充缺失值_pandas填充空值
将其Nan全部填充为0,这时再打印的话会发现根本未填充,这是因为没有加上参数inplace参数。
全栈程序员站长
2022/09/22
2.8K0
OpenCV中泛洪填充算法解析与应用
泛洪填充(Flood Fill)很多时候国内的开发者称它为漫水填充,该算法在图形填充与着色应用程序比较常见,属于标配。在图像处理里对二值图像的Hole可以通过泛洪填充来消除,这个是泛洪填充在图像处理中很经典的一个用途,此外还可以通过泛洪填充为ROI区域着色。这个在图像处理也经常用到。让我们首先看一下泛洪填充算法本身,然后再说一下在图像处理中的应用场景。 泛洪填充算法 通常泛洪填充需要从一个点开始,这个点可以随机选择的一点,但是一定要在填充区域内部,然后它就会进行四邻域或者把邻域寻找对周围像素完成填充,直到遇
OpenCV学堂
2018/04/04
2.4K0
OpenCV中泛洪填充算法解析与应用
【说站】js中如何填充字符串
1、padStart()用于头部补充,padEnd()用于尾部补充,将指定的字符串填充到字符串的头部或尾部,返回新的字符串。
很酷的站长
2022/11/23
2.6K0
【说站】js中如何填充字符串
首发!DevOps@BOC — 器用之道,如琢如磨
我来自中国银行软件中心的一个开发部门,中国银行软件中心从 2013年开始试点敏捷软件开发以及相关CI、CD等实践,而我们内部真正的提 DevOps 比这个要更晚些。
DevOps时代
2018/10/08
1K0
首发!DevOps@BOC — 器用之道,如琢如磨
点击加载更多

相似问题

如何在sonar.properties中配置SMTP?

111

SonarQube -指定sonar.properties的位置

22

如何在float列中填充0.00值,如ffill或bfill?

19

Sonarqube插件:如何获取sonar.projectVersion值?

13

在sonar.properties中禁用SCM不起作用

15
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文