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

Question

I'm currently experiencing an unhandled rejection error in my react/redux project and I'm a little confused as to why this is happening. I've been looking around for answers now for hours now with no success. This was working successfully before I tried to add in firebase (ref.push). I can post the working version code if needed. Originally I was just using db.json. Any help would be appreciated. I feel totally in over my head but I know this is gonna be something glaringly obvious to more experienced people.

create stream action (the error is throwing on line 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('/');
  };
};

reducers

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

stack

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

In your action creator, you seem to assume that the promise returned by ref.push() resolves to the pushed value. However, the official API documentaion doesn't support this theory. It just says:

Returns : non-null firebase.database.ThenableReference . Combined Promise and Reference; resolves when write is complete, but can be used immediately as the Reference to the child location.

So apparently, the promise is just for waiting for the operation to complete, and doesn't yield a value (ie, always yields undefined ).

As you know the value to return already before saving it to Firebase, you can restructure your code to return it directly.

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