时间戳

首页 > 解决方案 > 更改不会影响地图功能并且不会显示:)

javascript - 更改不会影响地图功能并且不会显示:)

问题描述

我正在构建一个聊天应用程序，基本上我正在调用一个函数来获取消息并将其推送到一个对象数组中，该数组看起来像这样

newChat = [{message: "new message ", className: "you", date: new Date()}]

代码看起来像这样

const send_message = (message) => {
    newChat.push({
        message: message,
        className: 'you',
        date: new Date().toString()
    })
    console.log(newChat)
}
const [message, setmessage] = useState(null)

return (
    <div className="chat">
        {
            newChat.map((message, index) => (
                <div className={message.className} key={index}>
                    <div className="message-container">
                        <h1 className={`message-${message.className}`}>{message.message}</h1>
                        <h5 className="date">{message.date.split('T')[0] + ' ' + message.date.split('T')[1]}</h5>
                    </div>
                </div>
            ))
        }
        <div className="input-container">
            <Input onChange={(e) => setmessage(e.target.value)} placeholder="Write a message" />
            <Button onClick={() => send_message(message)} type="primary">Send</Button>
        </div>

        
    </div>
)

}

导出默认聊天

问题是消息被推送到数组，但请不要在屏幕上显示任何建议:)在此处输入图像描述

标签： javascriptreactjs

解决方案

当状态或道具发生变化时反应重新渲染。要在 newchat 更改时更新组件，您需要将其声明为状态。

const [newChat, setNewChat] = useState([{message: "new message ", className: "you", date: new Date()}])

const send_message = (message) => {
    setNewChat([
       ...newChat,
       {
          message: message,
          className: 'you',
          date: new Date().toString()
       }
    ]);
}

推荐阅读