Question

尝试在本机应用程序上进行第一次Redux，但我遇到了这个问题...

在我连接了组件并传递mapStateToProps调用之后，在函数内部我可以很好地记录状态。但是，当我在组件中使用此道具时，它的定义是不确定的。我在其他组件中使用redux状态就好了...

谢谢！

import React from 'react';
import { Container, Content, Button, 
Text,Card,CardItem,Body,Icon,Header,Left,Right,Title  } from 'native-base';

import { connect } from 'react-redux';

class HomeScreen extends React.Component {

    static navigationOptions = {
        header: null
    };

    tryLogout(){
         console.log(this.props.isLogged);
         // UNDEFINED HERE
   }

   render() { 

     return (
       <Container>
         <Header>
           <Left></Left>
           <Body>
             <Title>Menu</Title>
           </Body>
           <Right>
             <Button transparent onPress={this.tryLogout}>
               <Icon name='menu' />
             </Button>
           </Right>
         </Header>
         <Content padder>                  
         </Content>
       </Container>
     );
   }
 }

 const mapStateToProps = state => {
   console.log(state.isLogged);
   // I GET DATA HERE
   return {
       isLogged: state.isLogged
   }
 }

 export default connect(mapStateToProps,{})(HomeScreen);

Answer 1

问题在于，当您调用this.tryLogout时，this关键字是动态绑定到事件的，而不是component本身，因此事件没有支持您正在寻找。

您可以采用不同的方法来解决此问题：

使用命名箭头功能

tryLogout = () => console.log(this.props)
...
onPress={this.tryLogout}

使用bind方法

onPress={this.tryLogout.bind(this)}

使用嵌入式箭头功能

onPress={() => this.tryLogout()}。

您可以查看文档中的不同技术：How do I bind a function to a component instance?

Answer 2

您收到此错误，因为您的blogs未绑定到组件。因此，tryLogout()引用与您的组件无关。将声明更改为此：

this

tryLogout = () => { console.log(this.props.isLogged); }（称为() => {}）为您进行绑定。

提示：

如果为您的组件构建需要访问任何arrow function或prop的方法，则需要将该函数绑定到组件类。当像我上面那样声明方法时，就是在绑定它。因此，您的方法将可以访问组件的任何state或prop。

将redux状态映射到道具不起作用

2 个答案: