访问this.props中的prop时，返回值为null？答案

【问题标题】：When accessing a prop in this.props, return value is null?访问this.props中的prop时，返回值为null？
【发布时间】：2017-12-26 00:25:26
【问题描述】：

我已经创建了我的操作/reducers/store 等。当我将 mapStateToPros 传递给我的 Shop 组件时，我可以访问我的道具。特别是在这个组件上，我想使用 this.props.auth 来查找当前登录的用户。在用户上有一个 isAdmin 道具，默认情况下是假的。当我调用 this.props.auth.isAdmin 时，它返回 null。

使用 node/express/mongoDB 作为我的后端

localhost error img

Shop Component top img

Shop Component bottom img

Actions for Reducer

Reducer

【问题讨论】：

你能展示你的reducer代码吗？
编辑了帖子。添加了动作和减速器图片
是不是因为你的初始状态等于null？无论如何，这样的问题可以通过调试轻松解决。在浏览器中的开发工具中，您可以简单地在所有关键位置（reducer、mapstatetoprops 等）设置断点并查看问题所在
技术上是的。但是因为我使用的是 fetch_user 类型，所以应该根据我使用的操作更新状态。当我调用 this.props.auth。我收到从 auth 传递的所有道具的对象。但是一旦我调用 this.props.auth.isAdmin，我就会收到 null。

标签： node.js mongodb reactjs express redux

【解决方案1】：

鉴于你的减速器截图https://i.stack.imgur.com/TRvKP.png，我会尝试这样的事情：

// authReducer.js 
const initialState = {
  auth: {
    isAdmin: false,
  },  
  isLoggedOn: false
}

// create a default schema for you state rather than defaulting to null 
export default function (state = initialState, action) {
  // the rest of your code
}

这将以符合组件预期的方式在 auth reducer 上设置您的初始 redux 状态。

对于每个操作，FETCH_USER 和 LOGOUT_USER，您将希望返回一个具有一些描述新状态的属性的对象，但您目前已将其设置为 LOGOUT_USER 返回 false，这是完全不同的数据格式（布尔值）然后我认为您要使用身份验证状态的表示形式（通常您想要一个对象）。

随着状态的变化，一种常见且方便的模式是返回一个新对象，它将旧状态与新状态合并，因此您最终可能会得到类似这样的操作：

case LOGOUT_USER: 
  return { ...state, action.payload }

这可确保您的 redux 状态始终符合特定的形状，并帮助您避免组件中的 props 出现 null / undefined 错误。

在不同的情况下，您可以从那里分派一个操作以将 isAdmin 属性更新为 true。

【讨论】：

非常感谢您的详尽解释。那工作得很好。一个小的调整是将 ...state, action.payload 切换到 ...state, ...action.payload。绝对有助于防止突变。不敢相信我没有早点想到。