javascript - 将 redux 状态映射到 props 不起作用

标签 javascript reactjs react-native redux

第一次尝试在react-native应用程序上进行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);

最佳答案

问题是,当您调用 this.tryLogout 时,this 关键字会动态绑定(bind)到事件,而不是 component 本身,因此该事件没有您正在寻找的 Prop 。

您可以采取不同的方法来解决此问题:

使用命名箭头函数

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?

关于javascript - 将 redux 状态映射到 props 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51145511/

相关文章:

javascript - 如何在 vue.js 中对计算属性进行排序

javascript - Jquery 和 html5 session 存储显示 json 下拉框中选择的最后状态

reactjs - 在react router dom中将代码从v5升级到v6时出错

css - 如何在不使用 styleSheet native 元素的情况下将 CSS 文件添加到 native 应用程序中

android - Firebase Crashlytics 构建错误 : "could not find io.fabric.tools:gradle:1.26.1"

javascript - 无法启动我的 nodejs 应用程序

javascript - Angular/Firestore - 获取由 'add' 方法创建的 ID 以用于路由器导航

javascript - 对象的多个组件

reactjs - React Native,类型错误: undefined is not an object When it is

reactjs - 如何从 strip 付款表中获取 "Save Card Details"选项?