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

【问题标题】：Unhandled Rejection (TypeError): Cannot read property 'id' of undefined未处理的拒绝（TypeError）：无法读取未定义的属性“id”
【发布时间】：2019-07-19 15:03:08
【问题描述】：

我目前在我的 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

【问题讨论】：

可以在reducer中添加action.payload的日志吗？
console.log in reducer 返回 undefined
可以添加堆栈跟踪吗？
我认为错误来自 action.payload.id 其中 action.payload 不是您所期望的对象。
您看到的错误表明您正在尝试从对象访问属性“id”。如我所见，您正在调度 CREATE_STREAM 操作。在 CREATE_STREAM 中，您访问属性 [action.payload.id] 它将在您的 action.payload 中查找 id 并且如果 action 有没有有效载荷，那么它是未定义的。看到Redux代码已经有一段时间了，所以如果你可以在CREATE_STREAM案例的return之前放置一个debugger，看看action.payload的值是多少。然后我们可以继续解决问题。

标签： javascript reactjs redux

【解决方案1】：

在您的动作创建者中，您似乎假设ref.push() 返回的承诺解析为推送的值。但是，official API documentaion 不支持这个理论。它只是说：

返回：非空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 });

【讨论】：