React聊天应用消息显示问题：区分发送与接收状态

Hey Matt, let's work through fixing that sender/receiver state issue in your React chat prototype! The core problem here is that your components aren't distinguishing between "this message was sent by me" vs "this message was sent by the other party" — even though you passed an author prop, you weren't using it to compare against each message's actual sender. Here's a step-by-step fix:

1. Update Message Data Structure (App.js) #

First, make sure every message in your state includes a sender field that identifies who sent it (either "agent" or "user"). This gives your components the context they need to determine if a message is sent or received:

// App.js
import { useState } from 'react';
import Agent from './Agent';
import User from './User';

function App() {
  // Initialize messages with sender identifiers
  const [messages, setMessages] = useState([
    { id: 1, text: "Hey there! How can I help?", sender: "agent" },
    { id: 2, text: "I need help with my order.", sender: "user" }
  ]);

  // Handle agent sending a message
  const handleAgentSend = (newMessage) => {
    setMessages(prev => [...prev, {
      id: Date.now(), // Simple unique ID using timestamp
      ...newMessage
    }]);
  };

  // Handle user sending a message
  const handleUserSend = (newMessage) => {
    setMessages(prev => [...prev, {
      id: Date.now(),
      ...newMessage
    }]);
  };

  return (
    <div className="app-container">
      {/* Pass current role to each component, not just author */}
      <Agent currentRole="agent" messages={messages} onSendMessage={handleAgentSend} />
      <User currentRole="user" messages={messages} onSendMessage={handleUserSend} />
    </div>
  );
}

export default App;

2. Update Agent Component (Agent.js) #

Modify the Agent component to use the currentRole prop to compare against each message's sender field. This lets it render "发送" (sent) for messages the agent sent, and "接收" (received) for user messages:

// Agent.js
import { useState } from 'react';

const Agent = ({ currentRole, messages, onSendMessage }) => {
  const [inputText, setInputText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputText.trim()) {
      // Pass the current role as the sender when sending a message
      onSendMessage({ text: inputText, sender: currentRole });
      setInputText("");
    }
  };

  return (
    <div className="chat-window">
      <h2>Agent Window</h2>
      <div className="message-list">
        {messages.map(msg => (
          <div 
            key={msg.id}
            className={`message ${msg.sender === currentRole ? 'sent' : 'received'}`}
          >
            <div className="message-author">
              {/* Show "You" for sent messages, "User" for received */}
              {msg.sender === currentRole ? "You (Agent)" : "User"}
            </div>
            <div className="message-text">{msg.text}</div>
            <div className="message-status">
              {msg.sender === currentRole ? "发送" : "接收"}
            </div>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit} className="message-input">
        <input
          type="text"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          placeholder="Type a message..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
};

export default Agent;

3. Update User Component (User.js) #

The User component follows almost the same logic — it just uses currentRole="user" to compare against message senders:

// User.js
import { useState } from 'react';

const User = ({ currentRole, messages, onSendMessage }) => {
  const [inputText, setInputText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputText.trim()) {
      onSendMessage({ text: inputText, sender: currentRole });
      setInputText("");
    }
  };

  return (
    <div className="chat-window">
      <h2>User Window</h2>
      <div className="message-list">
        {messages.map(msg => (
          <div 
            key={msg.id}
            className={`message ${msg.sender === currentRole ? 'sent' : 'received'}`}
          >
            <div className="message-author">
              {msg.sender === currentRole ? "You (User)" : "Agent"}
            </div>
            <div className="message-text">{msg.text}</div>
            <div className="message-status">
              {msg.sender === currentRole ? "发送" : "接收"}
            </div>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit} className="message-input">
        <input
          type="text"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          placeholder="Type a message..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
};

export default User;

4. Add Basic Styling (Optional) #

To make the send/receive distinction visual, add some CSS:

.chat-window {
  border: 1px solid #ddd;
  padding: 1rem;
  margin: 1rem;
  width: 400px;
}

.message-list {
  height: 300px;
  overflow-y: auto;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.message {
  margin-bottom: 0.8rem;
  padding: 0.6rem;
  border-radius: 8px;
}

.message.sent {
  background-color: #dcf8c6;
  margin-left: 20%;
  text-align: right;
}

.message.received {
  background-color: #fff;
  margin-right: 20%;
  border: 1px solid #eee;
}

.message-status {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.2rem;
}

Why Your Original author Prop Didn't Work #

You were passing an author prop, but your components weren't using it to compare against individual messages. By adding a sender field to each message and passing a currentRole prop to each component, you give them the context to answer: "Is this message mine, or the other person's?" That's what lets you correctly show "发送" for sent messages and "接收" for received ones.

内容的提问来源于stack exchange，提问作者Matt