React中如何向state追加输入框值且不覆盖原有state数据？

你遇到的问题来自两个认知偏差：

1. 最初写的setTitle(e.target.title)本身是错误写法：文本域的输入内容存储在e.target.value属性上，e.target不存在title字段，根本拿不到用户输入的内容。
2. 你认为setTitle(e.target.value)是「覆盖原有值、无法追加」，是误解了e.target.value的含义：文本域触发onChange事件时，e.target.value返回的是输入框当前的全部完整内容，不是你单次敲击输入的单个/增量字符。如果你的初始state是接口返回的"Hello"，正常输入时e.target.value会自动包含初始值+你后续输入的内容，直接set到state就会保留初始值、实现追加效果，不需要手动拼接。

如果按照你现在的写法出现了初始值被覆盖的情况，唯一的原因是你的接口赋值逻辑写在了错误的位置，在用户输入后重复触发了setTitle(接口返回值)，把用户输入的内容冲掉了。

• 接口请求赋值逻辑要保证只在组件挂载/需要刷新数据时执行一次，不要放在渲染主流程里重复触发

const [title, setTitle] = useState("");

// 组件挂载时请求一次接口拿初始值
useEffect(() => {
  const getInitTitle = async () => {
    const response = await fetch("/api/your-title-api");
    const initTitle = await response.text();
    setTitle(initTitle);
  };
  getInitTitle();
}, []); // 空依赖数组保证请求只触发一次，不会后续重复执行覆盖输入

• 文本域绑定直接用标准受控组件写法即可，不需要额外做拼接

<textarea
  placeholder="Title"
  value={title}
  onChange={(e) => {
    setTitle(e.target.value);
  }}
/>

补充说明：<textarea>标签本身不需要加type="text"属性，也不需要在标签中间嵌套子节点，多余的属性可以直接删掉。

如果你要实现的是无论光标在什么位置，所有新输入的内容都强制拼接到文本末尾（极度不推荐，会严重破坏正常输入体验，用户删除内容、在文本中间修改的操作都会异常），才需要手动拼接增量内容，参考代码如下：

<textarea
  placeholder="Title"
  value={title}
  onChange={(e) => {
    const addContent = e.target.value.slice(title.length);
    setTitle(prev => prev + addContent);
  }}
/>

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