无法更新 props/states

Question

在我的操作中class我有如下方法

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()});
      });
  };
};

一旦上述方法被调用，它会派发到UserSettingReducer reducer并存储到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 在 userSettingFetch API 调用之前不包含 userSettingData 对象。结果，你得到的 userSettingData 是 undefined。其中一个选项是在 userSettingData 在该州可用之前显示微调器，但这需要对您的应用程序进行其他更改。

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

Answer 2

在 INITIAL_STATE 中，userSettingData 为空，您正在尝试访问 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]

无法更新 props/states

Unable to get updated props/states

components

firebase

react-native

redux

redux-thunk