Javascript TypeError:无法分解属性'；证书'；属于'；这个.props'；因为它是未定义的

用户名道具显示为未定义。它在currentUser下的凭据下显示为状态，所以我不确定为什么会发生这种情况。错误显示在：

const {
   classes,
   currentUser: {
     credentials: { username, image },
     loading,
     authenticated,
   },
  } = this.props;

完整代码：

class messages extends Component {
  constructor() {
    super();
    this.state = {
      selectedChat: null,
      newChatFormVisible: false,
      chats: [],
    };
  }

  selectChat = (chatIndex) => {
    ...};

  newChatBtnClicked = () => {
    ...};

  render() {
    const {
      classes,
      currentUser: {
        credentials: { username, image },
        loading,
        authenticated,
      },
    } = this.props;

    firebase
      .firestore()
      .collection("chats")
      .where("users", "array-contains", username)
      .onSnapshot(async (res) => {
        const chats = res.docs.map((_doc) => _doc.data());
        await this.setState({
          chats: chats,
        });
        console.log(this.state);
      });

    let messagesMarkup = !loading ? (
      authenticated ? (
        <div>
          <div>Open Messages</div>
          <ChatList
            history={this.props.history}
            newChatBtn={this.newChatBtnClicked}
            selectChat={this.selectedChat}
            username={username}
            selectedChatIndex={this.state.selectedChat}
          ></ChatList>
        </div>
      ) : (
        <Redirect to="/login" />
      )
    ) : (
      <p> loading...</p>
    );
    return messagesMarkup;
  }
}

messages.propTypes = {
  currentUser: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => ({
  credentials: state.currentUser.credentials,
});

export default connect(mapStateToProps)(messages);

类消息扩展组件{
构造函数（）{
超级（）；
此.state={
selectedChat:null，
newChatFormVisible:false，
聊天室：[]，
};
}
选择聊天=（聊天索引）=>{
...};
newchatbtcled=（）=>{
...};
render（）{
常数{
班级，
当前用户：{
凭据：{用户名，图像}，
加载，
认证，
},
}=这是道具；
火基
.firestore（）
.收藏（“聊天”）
.where（“用户”、“数组包含”、用户名）
.onSnapshot（异步（res）=>{
const chats=res.docs.map（（_doc）=>_doc.data（））；
等待这一天({
聊天：聊天，
});
console.log（this.state）；
});
让messagesMarkup=！正在加载(
认证(
打开消息
) : (
)
) : (
加载

);
返回消息标记；
}
}
messages.propTypes={
当前用户：PropTypes.object.isRequired，
};
常量mapStateToProps=（状态）=>({
凭据：state.currentUser.credentials，
});
导出默认连接（MapStateTops）（消息）；

---

我尝试了credentials.username，但没有成功。我做错了什么？我在mapStateToProps上遗漏了什么吗？我想获取currentUser，这样我就可以显示他们的所有聊天信息，他们的用户名在凭据下，currentUser下的凭据恰好是未定义的，因此js无法解构

你可以：

a-按以下方式设置其默认值：

    const {
      classes,
      currentUser: {
        credentials: { username, image } = { username: 'foo', image: 'bar' },
        loading,
        authenticated,
      },
    } = this.props;

b-通过使用

对上游对象进行分解，将每个

currentUser

属性作为道具传递，并使用

消息设置其默认值。defaultProps={凭据：{username:'foo'，image:'bar'}

或在定义组件的位置添加

defaultProps

类属性。这可以被视为更为惯用

c-确保在使用组件时，

凭证

从未定义过

未定义

^^