useState 数组

✅ 初始化

interface Item {
  id: number;
  name: string;
}

const [array, setArray] = useState<Item[]>([]);

🔼 1. 增（Add）

//添加到末尾（类似 push）：
const addItemToEnd = (item: Item) => {
  setArray(prev => [...prev, item]);
};

//添加到开头（类似 unshift）：
const addItemToStart = (item: Item) => {
  setArray(prev => [item, ...prev]);
};

🔽 2. 删（Delete）

//根据 id 删除某项：
const removeItemById = (id: number) => {
  setArray(prev => prev.filter(item => item.id !== id));
};

//✅ 根据下标删除数组中的某一项：循环方式
const removeItemByIndex = (indexToRemove: number) => {
  setArray(prev => prev.filter((_, index) => index !== indexToRemove));
};
//使用
removeItemByIndex(2);

//✅ 替代写法（性能稍好一点，避免多次循环）：如果你喜欢 slice：
const removeItemByIndex = (indexToRemove: number) => {
  setArray(prev => [
    ...prev.slice(0, indexToRemove),
    ...prev.slice(indexToRemove + 1),
  ]);
};
//❗ 注意事项：
//• 删除前最好检查索引合法性，防止越界：
if (indexToRemove >= 0 && indexToRemove < array.length) {
  removeItemByIndex(indexToRemove);
}

🔍 3. 查（Find）
注意：查找不需要 setArray，直接在 array 上操作即可。

//查找某个项（如 id 匹配）：
const findItemById = (id: number) => {
  return array.find(item => item.id === id);
};

✏️ 4. 改（Update）

根据 id 修改某项内容：
const updateItemById = (id: number, newName: string) => {
  setArray(prev =>
    prev.map(item =>
      item.id === id ? { ...item, name: newName } : item
    )
  );
};

• 始终使用 不可变操作（返回新数组）来触发组件更新。
• 修改前先 map，删除用 filter，查找用 find。
• 每项数据推荐使用 id 字段来标识，避免因内容重复而误删误改。