未定义不是对象(评估auth.confirmresult)

Question

在尝试通过mapsstatetoprops和connect((之后，通过渲染函数中的道具访问状态属性时，在loginscreen.js组件中获取错误。

。

屏幕 loginscreen.js

import React, { Component } from "react";
import PhoneInput from "react-native-phone-input";
import { View, StatusBar, Text } from "react-native";
import { Container, Item, Input, Button } from "native-base";
import { firebaseAuth } from "../Config/firebase";
import { phoneChanged } from "../Actions/AuthActions";
import { connect } from "react-redux";
export class LoginScreen extends Component {
  static navigationOptions = {
    header: null
  };
  constructor(props) {
    super(props);
    this.state = {
      valid: ""
    };
  }
  componentDidMount() {
    this.unsubscribe = firebaseAuth.onAuthStateChanged(user => {
      if (user) {
        this.props.navigation.navigate("App");
      }
    });
  }
  componentWillUnmount() {
    if (this.unsubscribe) this.unsubscribe();
  }
  render() {
    const { auth } = this.props;
    return (
      <Container style={{ flex: 1, backgroundColor: "#4F6D7A" }}>
        <StatusBar barStyle="light-content" backgroundColor="#062b40" />
        <Text>This is LoginScreen</Text>
        <Container
          style={{
            flex: 1,
            justifyContent: "center",
            backgroundColor: "#4F6D7A"
          }}
        >
          {auth.confirmResult}
        </Container>
      </Container>
    );
  }
}
const mapStateToProps = state => {
  console.log(JSON.stringify(state) + "*************");
  return {
    auth: state.auth
  };
};
export default connect(
  mapStateToProps,
  { phoneChanged }
)(LoginScreen);

authreducer.js

import {
  LOGIN_FAIL,
  LOGIN_SUCCESS,
  LOGIN_USER,
  PHONE_CHANGED,
  CODE_SENT_ERROR,
  CODE_CHANGED,
  CODE_DISPATCHED,
  LOGIN_USER_PHONE,
  CODE_SENT,
  CODE_NOT_CONFIRMED,
  LOGOUT,
  SET_USER_OBJECT,
  CLEAR_AUTH
} from "../Actions/ActionTypes";
export const INITIAL_STATE = {
  phone: "+91",
  user: null,
  message: "",
  loading: false,
  codeInput: "",
  confirmResult: null
};
const AuthReducer = (state = INITIAL_STATE, action) => {
  console.log(action);
  switch (action.type) {
    case PHONE_CHANGED:
      return {
        ...state,
        phone: action.payload
      };
    default:
      return state;
  }
};
export default AuthReducer;

reducers index.js

import { combineReducers } from "redux";
import AuthReducer from "./AuthReducer";
export default combineReducers({
  auth: AuthReducer
});

root.js

import React from "react";
import { Provider } from "react-redux";
import { Navigator } from "./Navigation/index";
import { store } from "./Store/index";
import LoginContainer from "./Screens/LoginScreen";
export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Navigator />
      </Provider>
    );
  }
}

商店 index.js

import ReduxThunk from "redux-thunk";
import { createStore, applyMiddleware, compose } from "redux";
import reducer from "../Reducers/index";
let composeEnhancers = compose;
/*  eslint no-undef: 0    */
if (__DEV__) {
  /*  eslint no-underscore-dangle: 0    */
  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}
const store = createStore(
  reducer,
  {},
  composeEnhancers(applyMiddleware(ReduxThunk))
);
export { store };

Actions Authactions.js

//import { firebase } from "react-native-firebase";
import * as actionTypes from "./ActionTypes";
import { auth } from "../Config/firebase";
const phoneChanged = text => {
  return {
    type: actionTypes.PHONE_CHANGED,
    payload: text
  };
};
export { phoneChanged };

导航 index.js

import {
  createStackNavigator,
  createSwitchNavigator,
  createAppContainer
} from "react-navigation";
import AuthLoading from "../Screens/AuthLoading";
import HomeScreen from "../Screens/HomeScreen";
import { LoginScreen } from "../Screens/LoginScreen";
const AuthStack = createStackNavigator({
  Login: LoginScreen
});
const AppStack = createStackNavigator({
  Home: HomeScreen
});
const switchNavigator = createSwitchNavigator(
  {
    AuthLoading: AuthLoading,
    App: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName: "AuthLoading"
  }
);
export const Navigator = createAppContainer(switchNavigator);

package.json

{
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios"
  },
  "dependencies": {
    "@babel/runtime": "^7.4.4",
    "firebase": "^5.11.1",
    "isomorphic-fetch": "^2.2.1",
    "native-base": "^2.12.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-native": "0.57.5",
    "react-native-firebase": "^5.3.1",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-otp-inputs": "^2.0.1",
    "react-native-phone-input": "^0.2.1",
    "react-navigation": "^3.9.1",
    "react-redux": "^7.0.3",
    "redux": "^4.0.1",
    "redux-immutable-state-invariant": "^2.1.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-preset-expo": "^5.0.0",
    "eslint-plugin-react-hooks": "^1.6.0",
    "expo": "^32.0.6"
  },
  "private": true
}

不应丢下错误，道具应能够访问状态属性。

Answer 1

关于股东的第二个参数：

[ preloadedState](任何(：初始状态。您可以选择将其指定以在Universal Apps中从服务器中保湿状态，或还原以前序列化的用户会话。如果您使用组合核器生产还原器，则必须是一个与传递键相同形状的普通物体。

因此{}覆盖初始状态，并且不会像预期的那样是{auth: ...} ...应该可以像撰写示例一样跳过参数，例如：

const store = createStore(
  reducer,
  composeEnhancers(applyMiddleware(ReduxThunk))
);

Answer 2

修改构造函数如下：

constructor(props) {
    super(props)
    ........
}

存储索引文件如下：

import reducer from "../Reducer/index"

根文件如下：

import { Navigator } from "./Navigation/index"
import { store } from "./Store/index"

导航/索引如下：

import LoginScreen from "../Screens/LoginScreen"

react-redux(> 7.0.1(使用挂钩＆amp;反应本(＆lt; 0.59(尚不支持钩子。

您可以在应用程序文件夹中运行npm ls react-native来检查所使用的版本。

如果您发现其中一个以上，这也可能会造成问题。有关它的更多信息

有两个解决方案

将React本地版本升级到0.59.0

或

将React Redux版本降低到6.0.1

我希望对您有帮助。