React状态Bug求助：新增块后后续块消失问题排查

常见Bug点分析 #

• 数组更新方式错误：如果直接修改原blocks数组（比如用splice后直接赋值给状态），React无法检测到数组变化，会导致后续块渲染丢失。必须创建新数组来触发状态更新。
• 插入逻辑错误：在靠前位置插入新块时，可能错误截断了原数组，只保留了插入点之前的元素，没有拼接插入点之后的元素。
• key值问题：如果块的key使用了索引而非唯一标识，插入新元素后React的diff算法会错误复用组件，导致后续块被误判为“删除”。

正确的插入逻辑示例 #

假设你的状态定义为const [blocks, setBlocks] = useState([])，处理回车的函数应按以下方式编写：

const handleEnter = (index) => {
  // 创建带唯一标识的新块
  const newBlock = { id: Date.now(), content: '' };
  // 拆分原数组，拼接新块与后续元素，生成新数组
  const newBlocks = [
    ...blocks.slice(0, index + 1),
    newBlock,
    ...blocks.slice(index + 1)
  ];
  setBlocks(newBlocks);
};

关键注意事项 #

• 必须生成新数组：禁止使用blocks.splice(index+1, 0, newBlock)后直接setBlocks(blocks)，因为splice修改原数组，React无法识别状态变化。
• 使用唯一key：渲染块列表时，用每个块的唯一id作为key，而非索引：

{blocks.map(block => (
  <Block key={block.id} {...block} />
))}

若用索引当key，插入新元素后后续元素的索引会变化，React会认为这些元素被替换，引发渲染异常。

代码排查步骤 #

1. 检查插入函数，确认是否正确生成了包含所有原有元素的新数组。
2. 查看块渲染时的key值，是否使用了非索引的唯一标识。
3. 在插入操作后打印newBlocks数组，确认后续元素是否完整保留。

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