React/React Native中如何使用useState同时保留历史数据与新增数据

要实现持续新增数据时不丢失之前录入的历史内容，核心是将存储目标的状态初始化为数组类型，每次更新状态时基于已有状态做增量拼接，不要直接用新值覆盖原有状态。

基础可运行实现 #

以下是覆盖你描述场景的完整示例代码，输入A、B等内容点击添加后，所有历史内容会永久保存在状态中：

import { useState } from 'react';

export default function RecordKeeper() {
  // 初始化存储容器为空数组，所有历史数据都存在这个状态里
  const [recordList, setRecordList] = useState([]);
  const [currentInput, setCurrentInput] = useState('');

  const handleAddRecord = () => {
    const value = currentInput.trim();
    if (!value) return;
    // 核心更新逻辑：用函数式更新拿到最新的上一轮状态，展开旧数组后追加新值
    setRecordList(prevRecords => [...prevRecords, value]);
    // 清空输入框准备下一次录入
    setCurrentInput('');
  };

  return (
    <div>
      <input
        value={currentInput}
        onChange={e => setCurrentInput(e.target.value)}
        placeholder="输入要存储的内容"
      />
      <button onClick={handleAddRecord}>添加记录</button>

      <p>* 已存储的所有记录：</p>
      <ul>
        {recordList.map((record, idx) => (
          <li key={idx}>{record}</li>
        ))}
      </ul>
    </div>
  );
}

关键避坑点 #

• 优先用函数式更新写法：即setState(prevState => 新状态)的形式，不要直接在更新时取外层闭包的状态值做拼接。如果短时间内连续触发多次添加操作，闭包内的状态可能是旧快照，会导致中间新增的记录丢失，函数式更新可以保证每次拿到的都是最新的全量状态。
• 禁止直接修改原状态：不要用push、splice这类方法直接操作state里的原数组，直接修改原状态不会触发组件重渲染，还会打乱React的状态快照机制，必须通过展开运算符、filter、map这类方法返回全新的数组传给set方法。
• 支持复杂数据结构：如果需要存储的不只是文本，还要带录入时间、标签等属性，只要把追加的新值换成对象即可，比如setRecordList(prev => [...prev, {content: value, createdAt: Date.now()}])，核心逻辑完全不变。

拓展提示：如果后续需要实现删除、编辑某条历史记录的需求，同样遵循「不修改原状态、基于上一轮状态生成新数组」的原则即可，比如删除指定索引的记录可以写setRecordList(prev => prev.filter((_, idx) => idx !== targetIndex))。

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