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

Posted 2023-02-23

【中文标题】无法获取更新的道具/状态

【英文标题】：Unable to get updated props/states

【发布时间】：2018-09-06 15:04:28

【问题描述】：

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

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 未定义？

【问题讨论】：

userSetting 的 INITIAL_STATE 是什么？

如果您能提供 Plunker 样本或类似的东西，将会很有帮助并且更快。

@MukeshSoni：用户设置的 INITIAL_STATE 为空

@MukeshSoni：请再次参考我的问题，其中包含INITIAL_STATE

【参考方案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]

【讨论】：

我尝试将 userSettingData 的 INITIAL_STATE 设置为 ，错误不再抛出，但似乎没有响应。然后我尝试在我的组件上将其更改为<Text>JSON.stringify(this.props.userSettingData)</Text> 我可以看到打印出 JSON 格式的对象但不明白原因

您的有效负载是一个具有随机键的对象，而您想要的对象是该键的值。要从那里获取对象，您可以使用 Object.entries - payload: Object.entries(snapshot.val())[0]

如果我错了请纠正我，为了使这个工作我需要在userSettingFetch方法中设置Object.entries(snapshot.val())[0]作为有效负载，在我的reducer中我需要设置类似userSettingData: action.payload[1]

确实设法按预期获取数据，但它似乎使用索引进行硬编码 1.. 对此不太满意哈哈

啊，是的，Object.entries 将对象转换为两个元组的数组（具有两个值的数组）。每个内部数组都有 [key, value]，其中 key 是属性名称，value 是属性值。我会更新我的答案

【参考方案2】：

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

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

【讨论】：

请再次参考我的问题，因为我已经包含了我的INITIAL_STATE。我怀疑userSetting 不包含userSettingData 键的情况相同，这就是我分享mapStateToProps 功能的原因。