时间戳

首页 > 解决方案 > 带有反应js的聊天地图，数组内的对象

javascript - 带有反应js的聊天地图，数组内的对象

问题描述

我正在尝试进行基本的聊天。我希望对于每个联系人，我都可以保存来自两个用户的消息并将它们显示在屏幕上（就像在 whatsapp 网络中聊天一样）。

我的代码：

    const [chatArr , setChatArr] = useState([
    {
        id: "v7fAa5OltrU=",
        from: "Shai Dayan",
        newMsg:{
            msgs: [
                {sender: 0, text:"Hello there, I'm using Chat !"},
             {sender: 1, text:"Hello there, I'm using Chat !"}
        ]
        },
        group: false,
        players: ['Shai Dayan']
},

我正在尝试像这样映射这些文本：

                    {chatArr[fullChat].newMsg.msgs.map((element,index)=>{
                    return <div className='speech-bubble'>
                        <div className="text-msg">
                            <div className='name-msg'>
                        <span className='from'>{chatArr[fullChat].from}</span> <br/>
                        {element.text}
                        </div>
                        <div>
                        </div>
                        </div>
                    </div>
                })}

但它不起作用..如何制作一个对象数组，每个对象将包含发送者和文本并按顺序映射它？

标签： javascriptreactjs

解决方案

从您在此处发布的数组中，您可以映射它。

您需要有一个嵌套映射，首先映射您的聊天，然后映射聊天中的每条消息

{
    chatArr && chatArr.map((chat,index) => {
        return (
            <>
                {
                    chat.newMsg.msgs.map((msg,idx) => {
                        return (
                            <div className='speech-bubble'>
                                <div className="text-msg">
                                    <div className='name-msg'>
                                        <span className='from'>{chat.from}</span> 
                                        <br/>
                                        {msg.text}
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
               
            </>
        )
    }
}

推荐阅读