0

我正在将Redux与React Native应用程序一起使用，并且在尝试集成Redux-Persist时出现红框错误。一旦我导航到具有ProfileForm并具有this.props.age状态的初始屏幕，我就会看到：

TypeError: Cannot read property "age" of undefined

我不太确定我哪里出错了。我age = 0在减速器中设置了初始值。那么怎么样呢undefined？这是相关的代码：

减速器/UserReducer.js 

import { CALCULATE_BMI, CALCULATE_AGE } from '../actions/types';

const INITIAL_STATE = { bmi: 0, age: 0 };

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case CALCULATE_BMI:
      return { ...state, bmi: action.bmi };
    case CALCULATE_AGE:
      return { ...state, age: action.age };
    default:
      return state;
  }
};

减速器/index.js 

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import userReducer from './UserReducer';

export default combineReducers({
  user: userReducer,
  form: formReducer,
});

存储/index.js

import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, persistCombineReducers } from 'redux-persist';
import storage from 'redux-persist/es/storage'; // default: localStorage if web, AsyncStorage if react-native
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import reducers from '../reducers';

const config = {
  key: 'root',
  storage,
};

const reducer = persistCombineReducers(config, { reducers });

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default () => {
  const store = createStore(reducer, {}, composeEnhancers(applyMiddleware(thunk, logger)));
  const persistor = persistStore(store);
  return { persistor, store };
};

ProfileForm.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, Text, View, TouchableOpacity, Alert } from 'react-
native';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import * as actions from '../actions';
import DatePickerModal from '../components/DatePickerModal';

class ProfileForm extends Component {
  // other code here
  <Field name="birthdate" component={DatePickerModal} />
    {this.props.age === 0 ? null : (
      <Text style={styles.labelStyle}>{`Age: ${this.props.age}`}</Text>
    )} 
  //other code here
}

const mapStateToProps = state => ({
  age: state.user.age,
});

export default compose(connect(mapStateToProps, actions), reduxForm({ form: 'Profile', validate }))(
  ProfileForm,
);

应用程序.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/es/integration/react';
import MainNavigator from './routes';
import configureStore from './store';

const { persistor, store } = configureStore();

export default class App extends Component {
  // other code here
  render() {
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <MainNavigator />
        </PersistGate>
      </Provider>
    );
  }
}

我尝试删除传递给createStore的空对象 {} ，将其设置为未定义，并在此处设置初始值，但似乎没有任何效果。任何指导表示赞赏。

4

0 回答 0