React聊天应用Bug求助：切换对话时textarea内容未清空

问题根源在于输入框的状态没有和当前选中的对话绑定——如果用单一变量存储输入内容，切换对话时自然不会同步更新。可以用以下两种方案解决：

方案1：为每个对话单独存储未发送输入 #

把未发送的输入内容存在一个对象里，用对话ID作为键，对应存储该对话的输入文本。这样切换对话时，输入框会自动读取对应对话的未完成输入。

示例代码：

import { useState } from 'react';

function ChatApp() {
  // 当前选中的对话ID
  const [activeChatId, setActiveChatId] = useState('chat1');
  // 存储各对话的未发送输入，结构：{ 对话ID: 输入文本 }
  const [unsentInputs, setUnsentInputs] = useState({});

  // 获取当前对话的输入内容，没有则为空字符串
  const currentInput = unsentInputs[activeChatId] || '';

  // 更新输入时，仅针对当前对话ID存储
  const handleInputChange = (e) => {
    setUnsentInputs(prev => ({
      ...prev,
      [activeChatId]: e.target.value
    }));
  };

  // 发送消息后清空当前对话的输入
  const handleSend = () => {
    // 这里写你的发送逻辑
    setUnsentInputs(prev => ({
      ...prev,
      [activeChatId]: ''
    }));
  };

  // 切换对话的方法
  const switchChat = (chatId) => {
    setActiveChatId(chatId);
  };

  return (
    <div className="chat-app">
      {/* 对话切换栏 */}
      <div className="chat-list">
        <button onClick={() => switchChat('chat1')}>客户1</button>
        <button onClick={() => switchChat('chat2')}>客户2</button>
      </div>
      {/* 输入区域 */}
      <textarea
        value={currentInput}
        onChange={handleInputChange}
        placeholder="输入消息..."
      />
      <button onClick={handleSend}>发送</button>
    </div>
  );
}

方案2：拆分组件，让每个对话独立管理输入状态 #

如果聊天界面按对话拆分组件，让每个Chat组件自己维护输入状态。切换对话时通过条件渲染显示对应组件，每个组件实例会保留自己的输入状态。

示例代码：

import { useState } from 'react';

// 单个对话组件，独立管理输入状态
function Chat({ chatId }) {
  const [inputText, setInputText] = useState('');

  const handleSend = () => {
    // 发送逻辑写这里
    setInputText('');
  };

  return (
    <div className="chat-container">
      {/* 消息列表区域 */}
      <div className="messages">{/* 渲染聊天消息 */}</div>
      {/* 输入框 */}
      <textarea
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        placeholder="输入消息..."
      />
      <button onClick={handleSend}>发送</button>
    </div>
  );
}

function ChatApp() {
  const [activeChatId, setActiveChatId] = useState('chat1');

  return (
    <div className="chat-app">
      <div className="chat-list">
        <button onClick={() => setActiveChatId('chat1')}>客户1</button>
        <button onClick={() => setActiveChatId('chat2')}>客户2</button>
      </div>
      {/* 只渲染当前活跃的对话组件 */}
      {activeChatId === 'chat1' && <Chat chatId="chat1" />}
      {activeChatId === 'chat2' && <Chat chatId="chat2" />}
    </div>
  );
}

注意事项 #

• 方案1中，若初始有多个对话，可以提前给unsentInputs初始化对应键值对，比如useState({ chat1: '', chat2: '' })，避免首次切换时输入框为空。
• 方案2中，确保用对话ID作为组件的key（如果用map渲染对话列表），这样React能正确区分不同组件实例，不会复用状态。

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