Reactjs 为什么我会得到TypeError:undefined在删除组件时不是对象（计算'；items.items.map'；）？

我正试图从React应用程序的列表中删除一个项目组件，但在触发事件时出现

类型错误：undefined不是对象（正在评估'items.items.map'）

错误。我看不出代码有什么问题

function _delete(id) {
  return fetchWrapper.delete(`${baseUrl}/${id}`);
}

{items&&
items.items.map（（item）=>(
...
)
}

deleteItem（item.id）}
>

是什么导致它出错？该项已正确地从MongoDB上的集合中删除

---

沙盒：

感谢沙盒，它提供了更多的上下文，并使此问题变得可解决

看起来您正试图导出功能组件

ShoppingList

，这就是罪魁祸首：

export { ShoppingList };

这导致了错误：

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

这是因为当您使用

导出{ShoppingList}

时，您导出的是一个对象，而不是功能组件。因此：类型错误。这可以通过以下方式进行验证：

console.log({ShoppingList});

返回：

对象{ShoppingList:函数ShoppingList（）}

---

要解决此问题，请将导出命令更改为：

export default ShoppingList;

---

这解决了您原来的问题，但现在出现了其他错误。这可能是因为

shoppingService

未连接到CodeSandbox。如果您遇到任何其他问题，我可以帮您解决另一个问题

我重新阅读了您的问题，并随意删除了

shoppingService

，以确定您的删除函数发生了什么。我相信发生的情况是您试图编辑一个不可变变量

items

。相反，将

items

扩展到一个新数组中，然后用匹配的Id

首先清理数据框以删除重复项。项引用：

const myItems = [
  {
    id: "5f516ebbd8f4d11abe5919c8",
    itemName: "Bacon"
  },
  {
    id: "5f52e43e4dda46085f008aca",
    itemName: "Eggs"
  },
  {
    id: "5f57a3056a71a0143281c1a8",
    itemName: "Oranges"
  }
];

您的函数应该是这样的：

  function deleteItem(id) {
    let newItems = [...items].filter((item) => item.id !== id);

    setItems(newItems);

    console.log(newItems);
  }

---

CodeSandbox:

感谢这个沙盒，它提供了更多的上下文并使这个问题可以解决

看起来您正试图导出功能组件

ShoppingList

，这就是罪魁祸首：

export { ShoppingList };

这导致了错误：

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

这是因为当您使用

导出{ShoppingList}

时，您导出的是一个对象，而不是功能组件。因此：类型错误。这可以通过以下方式进行验证：

console.log({ShoppingList});

返回：

对象{ShoppingList:函数ShoppingList（）}

---

要解决此问题，请将导出命令更改为：

export default ShoppingList;

---

这解决了您原来的问题，但现在出现了其他错误。这可能是因为

shoppingService

未连接到CodeSandbox。如果您遇到任何其他问题，我可以帮您解决另一个问题

我重新阅读了您的问题，并随意删除了

shoppingService

，以确定您的删除函数发生了什么。我相信发生的情况是您试图编辑一个不可变变量

items

。相反，将

items

扩展到一个新数组中，然后用匹配的Id

首先清理数据框以删除重复项。项引用：

const myItems = [
  {
    id: "5f516ebbd8f4d11abe5919c8",
    itemName: "Bacon"
  },
  {
    id: "5f52e43e4dda46085f008aca",
    itemName: "Eggs"
  },
  {
    id: "5f57a3056a71a0143281c1a8",
    itemName: "Oranges"
  }
];

您的函数应该是这样的：

  function deleteItem(id) {
    let newItems = [...items].filter((item) => item.id !== id);

    setItems(newItems);

    console.log(newItems);
  }

---

CodeSandbox:

好问题，欢迎使用StackOverflow！你能提供一个完整的MRE以便我们进一步调试吗？谢谢。我会尽全力创建一个沙盒，但我不太确定没有本地API我会怎么做。谢谢@Anthony，我想只提供一个示例说明你如何尝试删除组件就可以了！不需要API，只需专注于捕获您正在尝试执行的操作。我添加了更多代码，这些代码可能有用，也可能没用。这些代码成功地删除了API中的项，但单击按钮的

deleteim（）

它会导致类型错误。

shoppingService

只是与API对话的js。我的

deleteItem

函数在删除API中的项目后会导致类型错误。这有助于解释我的问题，还是我应该提供更多信息？我对问题有两种预感。如果你能将MRE弹出到codesandbox中，我可以可能会很快缩小问题的范围。很好的问题，欢迎使用StackOverflow！你能提供一个完整的MRE以便我们进一步调试吗？谢谢。我会尽力创建一个沙盒，但我不太确定在没有本地API的情况下我会怎么做。谢谢@Anthony，我想只要提供一个示例，说明你如何尝试删除组件就可以了o！不需要API，只需专注于捕获您正在尝试执行的操作。我添加了一些可能有用也可能无用的代码。这些代码成功地删除了API中的项，但单击按钮的

deleteItem（）

它会导致类型错误。

shoppingService

只是与API对话的js。我的

deleteItem

函数在删除API中的项目后会导致类型错误。这有助于解释我的问题，还是我应该提供更多信息？我对问题有两种预感。如果你能将MRE弹出到codesandbox中，我可以可能会很快缩小问题的范围。谢谢。我现在正在使用

export default ShoppingList

，但我仍然得到

TypeError:undefined不是一个对象（评估'items.items.map'）

当我单击调用

deleteItem（）的删除按钮时

函数。以前，当json响应中既没有

项

又没有

项计数

时，它就工作了