带有 Redux 的 React-Native 无法读取未定义的属性 'dispatch'

Question

我想在 firebase 身份验证管理器说没有经过身份验证的用户后从我的 componentWillMount() 调用一个操作。这是我的代码：

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';
import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import * as actions from '../actions';
import * as firebase from 'firebase';
import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'react-native-responsive-dimensions';

const ristImage = require('../assets/risto-landing.png');

class LandingScreen extends Component {

  componentWillMount(){
    firebase.auth().onAuthStateChanged(function(user) {
   if (user) {
     console.log('User Logged-in')
   } else {
     console.log('No Authenticated User')
     return(
  this.props.dispatch(clearState())
    )
   }
 });
  }

  fbLoginPress() {
  this.props.fbLogin();
  }

  render() {
    return (
      <View style={styles.containerStyle}>
        <View>
          <Image
            resizeMode="contain"
            style={styles.landingImageStyle}
            source={ristImage}
          />
          <Text style={styles.titleAppStyle}>Risto </Text>
        </View>

        <View style={styles.buttonContainer}>
          <Button
            large
            title="Sign in With Facebook"
            backgroundColor="#4068AD"
            icon={{ name: 'facebook-square', type: 'font-awesome' }}
            style={[styles.buttonStyle, styles.fbColor]}
            onPress={this.fbLoginPress.bind(this)}
          />

          <Button
            large
            title="Sign In or Sign Up With Email"
            icon={{ name: 'envelope', type: 'font-awesome' }}
            backgroundColor="#F8A443"
            style={[styles.buttonStyle, styles.emailColor]}
            onPress={Actions.emailLogin}
          />

        </View>
      </View>
    );
  }
}

export default connect(null, actions)(LandingScreen);

现在，我想要的是从我的 ./authAction 文件调用我的操作 clearState() 以清除初始状态。我的方法是否正确，或者是否也可以直接在我的 componentWillMount 中调用调度操作？

那么这就是我的 clearState() 在 actions/js 中起作用的地方：

export const clearState = () => async (dispatch) => {
  dispatch({type: SIGN_OUT});
  console.log('State re-initialized');
}

Answer 1

您提供给 onAuthStateChanged() 的回调中的 this 不是您认为的那样。它绑定到其他没有属性命名为 props 的东西。这就是你得到那个错误的原因。你可以做两件事来避免这种情况：

1.使用箭头函数：

firebase.auth().onAuthStateChanged(user => {
    ...
}

2。将回调绑定到您的 this.

firebase.auth().onAuthStateChanged((function(user) {
    ...
}).bind(this);

我更喜欢第一种选择。

此外，如果您将动作对象传递给 connect() 函数，它不会将 dispatch 注入到您的道具中。相反，它将提供一个函数作为具有相同名称的道具，并且已经包装到 dispatch().

来自react-redux docs：

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

这意味着您只需调用 this.props.clearState()。

带有 Redux 的 React-Native 无法读取未定义的属性 'dispatch'

React-Native with Redux Cannot read property 'dispatch' of undefined

dispatch

reactjs

react-native

redux

带有 Redux 的 React-Native 无法读取未定义的 属性 'dispatch'

React-Native with Redux Cannot read property 'dispatch' of undefined

dispatch

reactjs

react-native

redux

带有 Redux 的 React-Native 无法读取未定义的属性 'dispatch'