React useState存储值正确但删除数组项时页面视图未更新问题求助

AI 小北

2026-10-6

问题根因

你遇到的视图渲染和数据不一致的问题，核心原因是列表渲染时使用了数组下标作为key属性。
React通过key属性来识别列表中每个独立组件的身份，当你删除数组中间的某一项后，该项后面的所有数组元素的下标都会整体前移1位。比如数组原有3项对应下标0、1、2，删除下标为1的项后，原来下标为2的项现在下标变为1。React会根据key判定原来下标为2的组件就是现在下标为1的组件，最终只会移除最后一个下标对应的视图，就会出现你看到的「删除中间项却移除了最后一项」的表现，而实际数据更新是正确的。

修复方案

给每个价格对象添加唯一标识
你在执行新增价格操作时，给每个新生成的价格对象添加一个全局唯一的id字段，可以用Date.now()、随机字符串或者uuid库生成，示例新增逻辑：

const addPrice = () => {
  setCourseData(prev => ({
    ...prev,
    prices: [...prev.prices, {
      id: Date.now(), // 新增唯一id
      name: '',
      description: '',
      price: 0,
      days: 0
    }]
  }))
}

修改列表渲染的key属性
将原来用数组下标i作为key的逻辑，替换为使用价格对象的唯一id：

{courseData.prices?.map((price) => {
  return (
    <div
      className='flex flex-wrap bg-white mb-4 p-2 rounded-md shadow-md'
      key={price.id}>
      {/* 其余内部组件代码保持不变 */}
    </div>
  )
})}