使用useState和useEffect后文本域无法编辑的问题排查

API 探路者

2026-8-18

问题原因与修复方案

核心问题

你的代码中，每次user变量更新时，useEffect都会无条件覆盖message状态。这会导致用户刚输入内容，只要user发生变化（哪怕是组件重渲染时user引用更新），模板消息就会立刻替换掉用户输入，看起来文本域“不可编辑”——本质是用户输入被强制覆盖了。

另外，useState初始化时未设置默认值，初始message为undefined，虽不影响核心功能，但可能导致文本域初始状态异常。

修复方案

需要添加判断逻辑，确保只有在用户未编辑过消息的情况下，才用模板更新message。

方案1：新增编辑状态标记

// 初始化消息状态和编辑标记
const [message, setMessage] = useState('');
const [isMessageEdited, setIsMessageEdited] = useState(false);   

// 仅当user变化且消息未被编辑时，设置模板
useEffect(() => {
  if (!isMessageEdited) {
    setMessage(`Hi ${user?.userData?.firstname}, I need help with ...`);
  }
}, [user, isMessageEdited]); 

const handleMessageChange = event => {
  setMessage(event.target.value);
  // 用户开始编辑后，标记为已编辑
  setIsMessageEdited(true);
};

<textarea value={message} onChange={handleMessageChange}></textarea>

方案2：直接判断消息是否为初始状态（适合简单场景）

如果初始时message为空，可通过判断消息内容是否为空来决定是否替换模板：

const [message, setMessage] = useState('');   

useEffect(() => {
  // 仅当消息为空时，设置模板
  if (!message) {
    setMessage(`Hi ${user?.userData?.firstname}, I need help with ...`);
  }
}, [user, message]); 

const handleMessageChange = event => {
  setMessage(event.target.value);
};

<textarea value={message} onChange={handleMessageChange}></textarea>