javascript – 错误：无法读取未定义的React Native属性’push’

2019-06-09 05:20:54 阅读：288 来源： 互联网

标签：javascript undefined this ios react-native

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

复制大部分代码(文本中的小变化)时,我收到此错误：

Error: Cannot read property 'push' of undefined

如果我尝试推送新的导航器视图,则会发生此错误.这是条纹下来的代码(最后的完整代码,但认为这里只有一个简短版本更具可读性)：

<TouchableHighlight onPress={() => this._rowPressed(eve)} >



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

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

如果有人可以向我解释,那会很好.

祝一切顺利
丹尼尔

完整错误报告：

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包含在主视图中：

    '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,则应包含单个视图：

'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所有视图合并在一起：

'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);

解决方法:

在你的index.ios.js中,你引用了一个导航器,此时没有设置.

<Dates navigator={navigator} />

所以,正如我所知,你必须选择使用NavigatorIOS：

1. NavigatorIOS作为Tab的子项

您需要将导航器定义为TabViewItems的子项,它本身会加载相应的视图：

var styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

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

2. NavigatorIOS作为根元素

class allNightClub extends Component {

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

这就是它对我有用的方式.我将index.ios.js的原始代码放入Index.js并进行了以下更改：

Index.js

<Dates
    navigator={this.props.navigator}
/>

Dates.js

<TouchableHighlight onPress={() => this._rowPressed(eve)}  underlayColor='#dddddd'>

标签：javascript,undefined,this,ios,react-native
来源： https://codeday.me/bug/20190609/1203113.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 错误：无法读取未定义的React Native属性’push’