Javascript 无法分解属性'；聊天'；属于'；这个.props.data'；因为它是未定义的

我是全新的全栈开发人员，我正在尝试编写一些代码，以便更好地理解React JS前端。我也使用过redux，但从未出现过错误。昨天我编写了一个用户聊天列表（用redux实现）。为了不错过我写的与另一个用于显示帖子的页面类似的内容：

chat.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Chat from '../components/chat/Chat';
import Grid from '@material-ui/core/Grid';

import PostSkeleton from '../utils/PostSkeleton';

import Profile from '../components/profile/Profile'

import { connect } from 'react-redux';
import { getChats } from '../redux/actions/dataActions';

class chat extends Component {
    componentDidMount(){
        this.props.getChats();
    }
    render(){
        const {chats, loading} = this.props.data;
        let recentChatsMarkup = !loading ? (                   //se ci sono post li visualizza uno ad uno
            chats.map(chat => 
            <Chat key={chat.chatId} chat={chat}/>)
            ) : (
                <PostSkeleton/>
                );
        return(
            <Grid container>
               <Grid item sm={4} xs={12}>
                <Profile/>
               </Grid>
               <Grid item sm={8} xs={12}>
                {recentChatsMarkup}
               </Grid>
               <Grid item sm={4} xs={12}>
                
               </Grid>
           </Grid>
        );
    }
    
}
chat.propTypes = {
    getChats: PropTypes.func.isRequired,
    classes: PropTypes.object.isRequired
}

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

export default connect(mapStateToProps,{getChats})(chat);

我还具有加载所有聊天室名称的功能：

dataActions.js

 export const getChats = () => (dispatch) => {
    dispatch({ type: LOADING_DATA });
    axios
      .get('/chats')
      .then((res) => {
        dispatch({
          type: SET_CHATS,
          payload: res.data
        });
      })
      .catch((err) => {
        dispatch({
          type: SET_CHATS,
          payload: []
        });
      });
  };

---

我不知道如何解决这个问题，我能做什么？

看起来聊天属性不在名为data的键下

所以试试

const{chats，load}=this.props
尝试更改您的

MapStateTops到此：
const MapStateTops=state=>（{authenticated:state.user.authenticated，data:state.data}）

 export const getChats = () => (dispatch) => {
    dispatch({ type: LOADING_DATA });
    axios
      .get('/chats')
      .then((res) => {
        dispatch({
          type: SET_CHATS,
          payload: res.data
        });
      })
      .catch((err) => {
        dispatch({
          type: SET_CHATS,
          payload: []
        });
      });
  };