React移除状态项后UI未正确更新问题求助

1. 确保状态更新遵循不可变原则 #

React 依赖状态的引用变化触发重渲染，直接修改原数组（如splice）不会让Context感知到状态变更。删除设备时必须创建新数组：

错误示例：

// 直接修改原数组，不会触发重渲染
const removeDevice = (id) => {
  const idx = devices.findIndex(d => d.id === id);
  devices.splice(idx, 1);
  setDevices(devices);
}

正确写法：

// 使用filter创建新数组，确保引用变化
const removeDevice = (id) => {
  setDevices(prev => prev.filter(device => device.id !== id));
}

2. 列表渲染使用唯一key而非索引 #

如果用数组索引作为key，删除项后剩余项的索引会重新排序，React会复用旧DOM节点，导致图片、计算值错乱。必须使用设备的唯一标识（如id）作为key：

错误示例：

{devices.map((device, index) => (
  <DeviceRow key={index} device={device} />
))}

正确写法：

{devices.map(device => (
  <DeviceRow key={device.id} device={device} />
))}

3. 缓存功率计算结果避免闭包问题 #

如果功率计算依赖组件内部的状态或属性，用useMemo缓存计算结果，确保依赖项正确：

const DeviceRow = ({ device }) => {
  // 缓存功率计算，依赖设备的功率相关属性
  const calculatedPower = useMemo(() => {
    return device.power * device.count; // 示例计算逻辑
  }, [device.power, device.count]);

  return (
    <div>
      <img src={device.imageUrl} alt={device.name} />
      <span>功率：{calculatedPower}W</span>
    </div>
  );
}

4. 检查Context消费是否正确 #

确保需要更新的组件都在Context Provider的包裹范围内，并且通过useContext获取最新状态，而非通过props传递旧值：

// 在组件中正确消费Context
const { devices, removeDevice } = useContext(DeviceContext);

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