时间戳

首页 > 解决方案 > 无法访问 redux 道具

javascript - 无法访问 redux 道具

问题描述

当用户登录到应用程序时，他们的信息（用户名、电子邮件等）会保存在 redux 中。我可以登录，但我的问题是登录后访问实际信息。

这是我尝试访问 redux 的代码：

const mapStateToProps = state => ({
  user: state.user,
});


class LikeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      likerUID: Firebase.auth().currentUser.uid,
      likerUsername: this.props.user.username, //<------------------ Issue is here

错误：

TypeError: undefined is not an object (evaluating '_this.props.user.username')

当用户通过身份验证时，我如何将信息保存到 redux：

dispatch(authUser(Firebase.auth().currentUser.uid, Firebase.auth().currentUser.email, doc.data().username));

最后我的 redux 操作：

export const authUser = (userid, userEmail, username) => (dispatch) => {
  const data = {
    id: userid,
    username,
    email: userEmail,
  };
  dispatch(setAuthUser(data));
};

在我的 redux“authUser”中，我添加了console.log(username);正确记录用户名的行：

export const authUser = (userid, userEmail, username) => (dispatch) => {
  const data = {
    id: userid,
    username,
    email: userEmail,
  };

  console.log(username);
  dispatch(setAuthUser(data));
};

所以问题在于访问它，而不是设置它。

标签： javascriptreact-nativeredux

解决方案

不要在状态中存储道具

将值this.props放入this.state. this.props.user.username您的状态将保存它看到的第一个值。它不会用新值更新。

您的constructor函数在用户登录之前运行并设置状态，因此尝试访问this.props.user是一个错误（“TypeError：undefined is not an object”）。undefinedthis.props.user.username

相反，您希望在需要使用时直接从道具中访问用户名。这样你总能从 Redux 获得当前值。如果is ，您可以与可选链接 结合使用?.以避免错误。userundefined

const likerUsername = this.props.user?.username;

推荐阅读