react-native TypeError: undefined 不是一个对象(评估'this.props.navigator.push') [英] react-native TypeError: undefined is not an object (evaluating 'this.props.navigator.push')

问题描述

我正在尝试这个针对 android 的 react-native 教程:https://www.raywenderlich.com/126063/react-native-tutorial

I was trying this react-native tutorial for android: https://www.raywenderlich.com/126063/react-native-tutorial

我在使用导航器时遇到问题.第一个屏幕(SearchPage)工作正常，但是当尝试 .push 到下一个屏幕时，它给了我以下错误:

I'm having problems with navigtor. The first screen (SearchPage) works fine, but when trying to .push to the next it gives me the following error:

发生了不好的事情 TypeError: undefined is not an object (evaluating 'this.props.navigator.push')

主要内容:

render () {
 return(
  <Navigator
    initialRoute={{id: 'SearchPage'}}
    renderScene={this.renderScene.bind(this)}
    />
 );
}

renderScene(route, navigator) {
 switch (route.id) {
  case 'SearchPage':
   return (
    <SearchPage navigator={navigator} />
   );
   case 'TestScreen':
    return (
     <TestScreen navigator={this.props.navigator} />
   );}

搜索页面:

_executeQuery(query) {
 this.setState({ isLoading: true });
 fetch(query)
  .then(response => response.json())
  .then(json => this._handleResponse(json.response).bind(this))
  .catch(error =>
     this.setState({
      isLoading: false,
      message: 'Something bad happened ' + error
   }));
}

_handleResponse(response) {
  this.setState({ isLoading: false , message: '' });
  if (response.application_response_code.substr(0, 1) === '1') {
    this.props.navigator.push({
      id: 'TestScreen',
    });
  } else {
    this.setState({ message: 'Location not recognized; please try again.'});
  }
}

提前致谢！

推荐答案

我认为这是一个范围问题.尝试使用 es6 粗箭头:

It's a scope issue I think. Try using es6 fat arrows :

renderScene = (route, navigator) => {
 switch (route.id) {
  case 'SearchPage':
   return (
    <SearchPage navigator={navigator} />
   );
   case 'TestScreen':
    return (
     <TestScreen navigator={navigator} />
   );
}

注意我在 TestScreen 案例中通过 navigator 更改了 this.props.navigator.

Notice I've changed in the TestScreen case this.props.navigator by navigator.

_executeQuery = (query) => {
 this.setState({ isLoading: true });
 fetch(query)
  .then(response => response.json())
  .then(json => this._handleResponse(json.response))
  .catch(error =>
     this.setState({
      isLoading: false,
      message: 'Something bad happened ' + error
   }));
}

_handleResponse = (response) => {
  this.setState({ isLoading: false , message: '' });
  if (response.application_response_code.substr(0, 1) === '1') {
    this.props.navigator.push({
      id: 'TestScreen',
    });
  } else {
    this.setState({ message: 'Location not recognized; please try again.'});
  }
}

这篇关于react-native TypeError: undefined 不是一个对象(评估'this.props.navigator.push')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！