實際上，我正在 React.js 中構建 Facebook Mesenger Clone，并使用了 Material UI。當我們運行代碼時，它會要求輸入用戶名。提供后我們可以在應用程序中發送消息。但是，一旦我們發送消息，我們只會在屏幕上打印用戶名該消息未顯示在網頁上。這是 App.js 代碼：    import React, {useEffect, useState} from 'react';import {Button, FormControl, Input, InputLabel} from "@material-ui/core";import Message from "./Message";import './App.css';function App() {    const [input, setInput] = useState('');    const [messages, setMessages] = useState([]);    const [username, setUsername] = useState('');    useEffect(() => {        setUsername(prompt('Please enter your name'));    }, [])    const sendMessage = (event) => {        event.preventDefault();        setMessages([...messages, {username: username, text: input}]);        setInput('');    }    return <div className="App">        <h1>Hey Mate! ??</h1>        <h2>Welcome {username}</h2>        <form>            <FormControl>                <InputLabel>Enter a message...</InputLabel>                <Input value={input} onChange={event => setInput(event.target.value)}/>                <Button disabled={!input} variant="contained" color="primary" type='submit' onClick={sendMessage}>Send                    Message</Button>            </FormControl>        </form>        {            messages.map(message => <Message username={username} message={message}/>)        }    </div>}export default App;