Question

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

TypeError: Cannot read property "age" of undefined

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

reducers / 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;
  }
};

reducers / 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,
);

App.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 的空对象{}，将其设置为未定义，并在此设置初始值，但似乎没有任何效果。任何指导赞赏。

Redux，Redux-persist，无法读取未定义的属性“age”

0 个答案: