未处理的拒绝（TypeError）：无法读取未定义的属性“ id”

Question

我目前在我的react / redux项目中遇到一个未处理的拒绝错误，我对为什么会这样有些困惑。 我一直在寻找答案，已经有好几个小时没有成功了。 在尝试添加Firebase（ref.push）之前，此方法已成功运行。 如果需要，我可以发布工作版本代码。 最初我只是使用db.json。 任何帮助，将不胜感激。 我完全感到头疼，但是我知道这对于更有经验的人来说将是显而易见的。

创建流操作（错误在第2行引发）

  export const createStream = (formValues) => {
  return async (dispatch, getState) => {
    const { userId } = getState().auth;
    const response = await ref.push({ ...formValues, userId });
    console.log(response.data);
    dispatch({ type: CREATE_STREAM, payload: response.data});

    //Navigation to get user back to streams list
    history.push('/');
  };
};

减速机

export default (state = {}, action) => {
    switch (action.type){
      case FETCH_STREAMS:
        return {...state, ..._.mapKeys(action.payload, 'id')};
      case FETCH_STREAM:
        return {...state, [action.payload.id]: action.payload};
      case CREATE_STREAM:
        return {...state, [action.payload.id]: action.payload};
      case EDIT_STREAM:
        return {...state, [action.payload.id]: action.payload};
      /* case DELETE_STREAM:
        return _.omit(state, action.payload); */
      default: 
        return state;
    }
  }

堆

eval
webpack-internal:///./src/reducers/streamReducer.js:24:326
combination
node_modules/babel-loader/lib/index.js??ref--6-oneOf-2!/Users/seth/projects/twitchclone/client/node_modules/redux/es/redux.js:454
p
<anonymous>:1:36402
v
<anonymous>:1:36684
(anonymous function)
<anonymous>:1:40069
dispatch
node_modules/babel-loader/lib/index.js??ref--6-oneOf-2!/Users/seth/projects/twitchclone/client/node_modules/redux/es/redux.js:213
e
<anonymous>:1:40553
eval
node_modules/babel-loader/lib/index.js??ref--6-oneOf-2!/Users/seth/projects/twitchclone/client/node_modules/redux-thunk/es/index.js:12
dispatch
node_modules/babel-loader/lib/index.js??ref--6-oneOf-2!/Users/seth/projects/twitchclone/client/node_modules/redux/es/redux.js:621

Answer 1

在动作创建者中，您似乎假设ref.push()返回的ref.push()解析为推入的值。 但是， 官方的API文档不支持该理论。 它只是说：

返回 ：非null firebase.database.ThenableReference 。 承诺与参考相结合； 在写入完成时解决，但可以立即用作对子位置的引用。

因此，显然，promise只是等待操作完成，而不产生任何值（即始终产生undefined ）。

如您所知在将值保存到Firebase之前已经返回的值，您可以重组代码以直接返回它。

// Store stream before passing it to ref.push()
const stream = { ...formValues, userId };
await ref.push(stream);

// Pass the stream as action payload
dispatch({ type: CREATE_STREAM, payload: stream });