Fatal编程技术网
  • javascript/
  • Javascript 针对未定义的this.props.navigation.navigate响应导航器问题

Javascript 针对未定义的this.props.navigation.navigate响应导航器问题

javascript reactjs react-native

Javascript 针对未定义的this.props.navigation.navigate响应导航器问题,javascript,reactjs,react-native,react-navigation,Javascript,Reactjs,React Native,React Navigation,我的脑袋现在被这个导航弄得七窍生烟，我看了几个关于这个的视频，然后跟着看，但仍然遇到相同的错误，即未定义不是this.props.navigation.navigate的对象错误 这是我的代码 App.js import React from 'react'; import { Container, Body, Header, Title, Content, List, ListItem, Text, Left, Right, Icon, Footer, FooterTab, Button} f

我的脑袋现在被这个导航弄得七窍生烟，我看了几个关于这个的视频，然后跟着看，但仍然遇到相同的错误，即未定义不是this.props.navigation.navigate的对象错误

这是我的代码

App.js

import React from 'react';
import { Container, Body, Header, Title, Content, List, ListItem, Text, Left, Right, Icon, Footer, FooterTab, Button} from 'native-base';
import { createStackNavigator } from 'react-navigation';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

import Home from './Home';
import Details from './Details';

export default createStackNavigator(
 {
Home: {
  screen: Home
},
Details: {
  screen: Details
}
}, 
{
initialRouteName: 'Home',
}
);
这是我的家

import React, { Component } from 'react';
import { Container, Body, Header, Title, Content, List, ListItem, Text, Left, Right, Icon, Footer, FooterTab, Button} from 'native-base';

class Home extends Component {
 constructor(){
super();
this.state = {
  data: []
};
}

getData(){
return fetch('https://testdata.com')
.then((response) => response.json())
.then((responseJson) => {
  console.log(JSON.stringify(responseJson.result));
    this.setState({data:responseJson.result});
    //alert(responseJson.result[1].name);
    //return responseJson.result[1].name;
})
.catch((error) => {
  console.error(error);
});
 }
componentDidMount(){
this.getData();
 }
  static navigationOptions = ({navigation}) => {
    const {state, navigate} = navigation;
    return {
        title: "test",
         headerStyle: {
          backgroundColor: '#4050B5',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold'
},
    };
 };



  render() {
 let yytCardData = this.state.data.map(function(cardData, i){
  return (
        <ListItem key={cardData.ver}>
          <Left>
            <Text>{cardData.name}</Text>
          </Left>
          <Right>
            <Icon name="arrow-forward" />
           <Button transparent info onPress={() => this.props.navigation.navigate('Details')}>
        <Text>Info</Text>
      </Button>
          </Right>
        </ListItem>
  )
});

return (
  <Container>
  <Content>
      <List>
        {yytCardData}
      </List>
    </Content>
    <Footer>
      <FooterTab>
        <Button vertical active>
          <Icon name="apps" />
          <Text>Title List</Text>
        </Button>
        <Button vertical>
          <Icon name="search" />
          <Text>Search</Text>
        </Button>
      </FooterTab>
    </Footer>
  </Container>
);
  }
  }
  export default Home

import React，{Component}来自'React'；
从“本机基”导入{容器、正文、页眉、标题、内容、列表、列表项、文本、左、右、图标、页脚、页脚选项卡、按钮}；
类Home扩展组件{
构造函数（）{
超级（）；
此.state={
数据：[]
};
}
getData（）{
返回获取（'https://testdata.com')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
log（JSON.stringify（responseJson.result））；
this.setState（{data:responseJson.result}）；
//警报（responseJson.result[1].name）；
//返回responseJson.result[1].name；
})
.catch（（错误）=>{
控制台错误（error）；
});
}
componentDidMount（）{
这是getData（）；
}
静态导航选项=（{navigation}）=>{
const{state，navigate}=导航；
返回{
标题：“测试”，
头型：{
背景颜色：“#4050B5”，
},
标题颜色：“#fff”，
头饰样式：{
fontWeight:“粗体”
},
};
};
render（）{
设yytCardData=this.state.data.map（函数（cardData，i）{
返回(
{cardData.name}
this.props.navigation.navigate（'Details'）}>
信息
)
});
返回(
{yytCardData}
标题列表
搜寻
);
}
}
导出默认主页
还有一个非常空的Details.js

  import React, { Component } from 'react';
  import { Container, Header, Content, List, ListItem, Text, Left, Right, Icon } from 'native-base';

  class Details extends Component {

  render() {

      return(
  <Container>
    <Header />
    <Content padder>
      <Card transparent>
        <CardItem>
          <Body>
            <Text>
              This is just a transparent card with some text to boot.
            </Text>
          </Body>
        </CardItem>
      </Card>
    </Content>
  </Container>
    );
   }
  }
   export default Details;

import React，{Component}来自'React'；
从“本机基”导入{容器、标题、内容、列表、列表项、文本、左、右、图标}；
类详细信息扩展组件{
render（）{
返回(
这只是一张透明的卡片，有一些文本要引导。
);
}
}
导出默认详细信息；
我不确定在这种情况下哪一部分是不正确的，但是仅仅做一个简单的导航听起来非常复杂

您需要在
渲染方法中使用箭头函数绑定您的函数


let yytCardData = this.state.data.map((cardData, i) => { // Replace function with arrow function



您需要使用
render
方法中的箭头函数绑定函数


let yytCardData = this.state.data.map((cardData, i) => { // Replace function with arrow function



问题在于主组件this.state.data.map（函数（cardData，i）{）中的作用域。如果不想使用arrow函数，则可以使用相同的函数，但只需将其分配给局部变量并使用它


let yytCardData = this.state.data.map(function(cardData, i){
let that = this;
  return (
        <ListItem key={cardData.ver}>
          <Left>
            <Text>{cardData.name}</Text>
          </Left>
          <Right>
            <Icon name="arrow-forward" />
           <Button transparent info onPress={() => that.props.navigation.navigate('Details')}>
        <Text>Info</Text>
      </Button>
          </Right>
        </ListItem>
  )
});



让yytCardData=this.state.data.map（函数（cardData，i）{
让那=这；
返回(
{cardData.name}
that.props.navigation.navigate（'Details'）}>
信息
)
});



如果您想使用arrow函数，那么请遵循Pritish Vaidya所提到的
问题在于主组件this.state.data.map（函数（cardData，i）{。如果您不想使用arrow函数，则可以使用相同的函数，但只需将其分配给局部变量并使用它


let yytCardData = this.state.data.map(function(cardData, i){
let that = this;
  return (
        <ListItem key={cardData.ver}>
          <Left>
            <Text>{cardData.name}</Text>
          </Left>
          <Right>
            <Icon name="arrow-forward" />
           <Button transparent info onPress={() => that.props.navigation.navigate('Details')}>
        <Text>Info</Text>
      </Button>
          </Right>
        </ListItem>
  )
});



让yytCardData=this.state.data.map（函数（cardData，i）{
让那=这；
返回(
{cardData.name}
that.props.navigation.navigate（'Details'）}>
信息
)
});



如果您想使用arrow函数，请遵循Pritish Vaidya提到的
实际错误是什么？实际错误是什么？如果您认为答案解决了我或其他人提供的问题，请接受。我认为您必须将
让that=此
置于函数之外。它具有块级范围。如果我移动，这将如何工作当我们使用es5标准函数以获得可用的作用域时，我们需要依赖于局部变量。问题是，这种方法
此
表示函数而不是类，但如果它在
之外，则
将像一个全局变量一样表示类。另一种方法是使用
.bind（这个）
在函数之后，将函数的作用域连接到类的作用域。如果您认为答案解决了我或其他人提供的问题，请接受。我认为您必须将
让that=this
放在函数之外。它有一个块级作用域。如果我将其移到函数之外，这将如何工作。当我们使用es5正常函数为了使作用域可用，我们需要依赖于局部变量。问题是，这种方式
此
表示函数而不是类，但如果它在
之外，则
将类似于全局变量并表示类。另一种方式是使用
绑定（this）
在函数之后，将函数的作用域连接到类的作用域。