Javascript 通过传入的数组进行映射后未呈现无状态组件

我已经重构了我的代码，现在有了一个无状态组件，它从容器组件传递了一个数组。然后，我尝试映射传递到无状态组件中的数组，但无法使其进行渲染

数组被正确地传入，但是当I

console.log（msg）

时，它只显示第一个

msg

，并且没有呈现任何内容

有人能发现下面的代码有什么问题吗

class App extends Component {

    componentDidMount() {
        const { getData } = this.props;
        getData();
    }

    render() {
        const { messages } = this.props;

        return (
            <ul>
                <MessageList messages={messages} />
            </ul>
        );
    }
}

const mapStateToProps = state => {

    return {
        messages: state.messages ? state.messages : [],
        members: state.members ? state.members : []
    };
};

const mapDispatchToProps = dispatch => {
    return bindActionCreators({ getChatLog, getMembersData }, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

---

您确定

消息

不是空的吗？在获取数据后，是什么触发了重新加载程序？我只能假设您没有正确处理抓取，并且组件没有更新。请提供一个。它在开始时是空的，但在获取后，它包含100个对象。数据来自redux存储。收到数据时，MapStateTrops应重新启动应用程序，否？我也应该把这个问题包括在内。我不认为这是问题所在，所以我省略了它，尽管我可能错了。是的，如果您使用的是redux，它可能会超出预期，但如果没有完整的示例，就不可能说出来。@FelixKling噢，看在上帝的份上，这是因为我只传递

消息

，而不是

成员

。我太马虎了，但问题应该是个错误，不是吗？

import React from 'react';
import moment from 'moment';
import Message from './Message';

const MessageList = ({messages, members}) => {

    let getMemberDetails = (userId) => {
        return members.find(member => member.id === userId);
    }

    let sortMessagesByDate = (messages) => {
        return (messages && messages.length > 0) ? messages.sort((a, b) => {
            return moment(b.timestamp) - moment(a.timestamp);
        }) : [];
    }

    return (
        <div>
            {sortMessagesByDate(messages).map(msg => {

               let member = getMemberDetails(msg.userId);
               let time = moment(msg.timestamp).format('DD-MM-YY');
               let name = `${member.firstName} ${member.lastName}`;

                return(
                    <div className="messages-container" key={msg.id}>
                        <img alt="avatar" src={msg.avatar } />
                        <Message msg={msg} name={name} time={time} />
                    </div>
                );
            })
        }   
        </div>
    );
}


export default MessageList;