如何正确删除Amplify Datastore数组中的模型对象

你报Object is not an instance of a valid model错误、删除逻辑不生效的核心问题有4个：

• storeItems是保存多条商品数据的状态数组，本身没有id属性，你写的storeItems.id实际是undefined，用这个值去DataStore查询拿不到合法的模型实例，把undefined/null传给DataStore.delete自然会抛类型错误。
• 所有DataStore的异步操作没有加await等待执行完成，也没有异常捕获，很容易出现未处理的Promise拒绝。
• 你先更新了本地状态数组，再去查要删除的数据库记录，顺序搞反了，本地状态splice更新后原索引位置的内容已经变化，会拿错要删除的对象。
• 数据拉取的useEffect依赖配置错误，把storeItems放在依赖数组里，会导致每次更新storeItems就重新触发查询，形成无限循环，且内部空值判断位置错误，容易拿到空的user对象。

1. 修复删除逻辑 #

const deleteItem = async (index) => {
  try {
    // 先从当前state里取到要删除的合法模型实例，不需要额外再发一次query请求
    const targetDeleteItem = storeItems[index];
    // 等待数据库删除完成
    await DataStore.delete(targetDeleteItem);
    // 数据库操作成功后再更新本地前端状态
    const updatedStoreItems = [...storeItems];
    updatedStoreItems.splice(index, 1);
    setStoreItems(updatedStoreItems);
  } catch (error) {
    console.log('删除操作失败：', error);
  }
};

2. 修复数据拉取useEffect逻辑 #

useEffect(() => {
  const fetchStoreItem = async () => { 
    const userInfo = await Auth.currentAuthenticatedUser();
    const userSub = userInfo.attributes.sub;
    const user = (await DataStore.query(User)).find(u => u.sub === userSub);
    // 提前判断user是否存在，避免空值调用属性报错
    if (!user) return;

    const storeItemList = (await DataStore.query(StoreItem))
      .filter(item => item.userID === user.id);
    setStoreItems(storeItemList);
  };
  fetchStoreItem();
  // 空依赖数组表示仅在组件挂载时执行一次拉取，避免无限重渲染
}, []);

• 你本地state里存的storeItems本身就是从DataStore查询返回的合法模型实例，删除时直接取对应索引的项传给DataStore.delete即可，不需要重复调用query查询，减少不必要的接口请求。
• 所有异步的DataStore操作都要搭配await和try/catch使用，避免出现未捕获的Promise异常。
• 如果需要后续实时同步DataStore的数据变更，可以额外订阅DataStore的observe事件更新本地state，不要把state本身放在拉取数据的effect依赖里。

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