无法获取更新的道具/状态

Question

在我的动作类中，我有一个方法如下

export const userSettingFetch = () => {
  const { currentUser } = firebase.auth();

  return (dispatch) => {
    firebase.database().ref(`/users/${currentUser.uid}/userSettings`)
      .on('value', snapshot => {

        dispatch({ type: USER_SETTING_FETCH_SUCCESS, payload: snapshot.val()});
      });
  };
};

一旦上述方法被调用，它会分派到UserSettingReducerreducer并存储到userSettingData状态，定义如下：

const INITIAL_STATE = {
  userSetting_DailyLimit: '',
  userSetting_City: '',
  userSetting_DisplayName: '',
  userSettingData: null
};
export default (state = INITIAL_STATE, action) => {
  console.log(action);
  switch (action.type) {
    case USER_SETTING_UPDATE:
      return { ...state, [action.payload.prop]: action.payload.value };
    case USER_SETTING_SUBMISSION_SUCCESS:
      return state;
    case USER_SETTING_FETCH_SUCCESS:
      return { ...state, userSettingData: action.payload };//action.payload;
    default:
      return state;
  }
};

下面是我的combineReducers 代码：

export default combineReducers({
  auth: AuthReducer,
  userSetting: UserSettingReducer
});

现在来到我的组件如下；

class MainScreen extends Component {
  componentWillMount() {
    console.log('inside MainScreen componentWillMount method');
    this.props.userSettingFetch();
    //console.log('Name is: '+this.props.userSettingData.userSetting_DisplayName);
  }
  render() {
    return(
      <Text>{this.props.userSettingData.userSetting_DisplayName}</Text>
    );
  }
}

const mapStateToProps = ({ auth, userSetting }) => {
  const { email, password, error, loading } = auth;
  const { userSettingData } = userSetting;

  return { email, password, error, loading, userSettingData };
};

export default connect(mapStateToProps,{ userSettingFetch })(MainScreen);

以下是应用运行时的控制台日志：

对我来说，一切看起来都很完美，但是我收到异常说 userSettingData 未定义？

Answer 1

在 INITIAL_STATE 中，userSettingData 为 null，您正尝试访问 userSettingData 的 userSetting_DisplayName 属性。你可以在那里检查 -

{this.props.userSettingData 
  ? <Text>{this.props.userSettingData.userSetting_DisplayName}</Text> 
  : <Text>User setting data still not available</Text>
}

或者你可以将userSettingData初始化为一个空对象

您的有效负载是一个具有随机键的对象，而您想要的对象是该键的值。要从那里获取对象，您可以使用 Object.entries -

payload: Object.entries(snapshot.val())[1]

Answer 2

看起来您的INITIAL_STATE 在userSettingFetch API 调用之前不包括userSettingData 对象。结果，你得到了userSettingData 是undefined。其中一个选项是在 userSettingData 处于可用状态之前显示微调器，但这需要对您的应用程序进行额外更改。

另一种情况可能是mapStateToProps，当您正在销毁不包含userSettingData 键的对象userSetting。