如何在React中更新聊天应用程序中的新消息?

Question

在React聊天应用程序中，我想显示发送方以及接收方的消息。我也只在提交时显示消息，但是，我希望它将其存储在sessionStorage中，也应该显示其他消息。问题是其他消息在同一消息框上得到更新。什么是合适的解决方案?

MessageApp

const [textValue, setTextValue] = useState("");
const [newTextValue, setNewTextValue] = useState("");
const [showSenderMessage, setShowSenderMessage] = useState(false)
const [showRecieverMessage, setShowRecieverMessage] = useState(false)
const sendMessage = (e) => {
e.preventDefault();
setShowSenderMessage(true)
if (textValue != "") {
const newTextValueHere = textValue;
setNewTextValue(newTextValueHere);
setTextValue("");
} else {
return;
}
};
return (
<>
{
showSenderMessage ? (
<div
className="bubble-sender"
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "flex-start",
width: "80%"
}}
>
<span style={{ width: "20%" }}>
<img
src="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
style={{
height: "50px",
width: "50px",
border: "2px solid black",
borderRadius: "50%"
}}
/>
</span>
<span style={{ width: "80%" }}>
{newTextValue}
<br />
<span
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "flex-end"
}}
>
<small style={{ color: "grey", float: "right" }}>11:23 AM</small>
</span>
</span>
</div>
) : null
}
<span>

<form
style={{
position: "fixed",
bottom: "0",
marginBottom: "80px",
width: "100%"
}}
>
<div className="col-lg-10 mb-3">
<div className="input-group mycustom">
<input
value={textValue}
type="text"
required
placeholder="Send Message"
maxLength="30"
onChange={(e) => setTextValue(e.target.value)}
/>
<div className="input-group-prepend">
<button
type="submit"
style={{
color: "white",
display: "flex",
flexWrap: "wrap",
justifyContent: "space-evenly"
}}
onClick={sendMessage}
>
Send Message
</button>
</div>
</div>
</div>
</form>
</span>
</>
);

为了更清晰，这里是codesandbox链接——>https://codesandbox.io/s/upbeat-montalcini-bpdsp

Answer 1

您可以创建文本消息数组并在地图中呈现它们。

const [textValue, setTextValue] = useState('');
const [textMessages, setTextMessages] = useState([]);
const [showSenderMessage, setShowSenderMessage] = useState(false);
const [showRecieverMessage, setShowRecieverMessage] = useState(false);
const sendMessage = (e) => {
e.preventDefault();
setShowSenderMessage(true);
if (textValue !== '') {
setTextMessages([
...textMessages,
textValue,
]);
setTextValue('');
}
};
return (
<>
{showSenderMessage && textMessages.map((text) => (
<div
className="bubble-sender"
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'flex-start',
width: '80%'
}}
>
<span style={{ width: '20%' }}>
<img
alt="blank profile"
src="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
style={{
height: '50px',
width: '50px',
border: '2px solid black',
borderRadius: '50%'
}}
/>
</span>
<span style={{ width: '80%' }}>
{text}
<br />
<span
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'flex-end'
}}
>
<small style={{ color: 'grey', float: 'right' }}>11:23 AM</small>
</span>
</span>
</div>
))}
<span>
<form
style={{
position: 'fixed',
bottom: '0',
marginBottom: '80px',
width: '100%'
}}
>
<div className="col-lg-10 mb-3">
<div className="input-group mycustom">
<input
value={textValue}
type="text"
required
placeholder="Send Message"
maxLength="30"
onChange={(e) => setTextValue(e.target.value)}
/>
<div className="input-group-prepend">
<button
type="submit"
style={{
color: 'white',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-evenly'
}}
onClick={sendMessage}
>
Send Message
</button>
</div>
</div>
</div>
</form>
</span>
</>
);