在this.props中访问prop时，返回值是否为空？

Posted 2023-02-18

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

在我的后端使用node / express / mongoDB

localhost error img

Shop Component top img

Shop Component bottom img

Actions for Reducer

Reducer

答案

鉴于您的减速机在这里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的地方，这是一种完全不同的数据格式（布尔值）然后我认为你是使用auth状态的表示（通常你想要一个对象）。

通过状态更改，一个常见且方便的模式是返回一个将旧状态与新状态合并的新对象，因此您最终可能会执行以下操作：

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

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

从那里你可以发送一个动作，在不同的情况下将isAdmin属性更新为true。