React JS中删除提示显示[object Object]的问题如何解决？

问题原因 #

你在handleDelete函数里错误地将过滤后剩余的人员数组newPerson直接拼接到提示字符串中，数组转为字符串时会显示[object Object]，这就是提示内容异常的根源。你需要的是要删除的那个人的name字段，而非剩余数组。

修复步骤 #

修改handleDelete函数，先通过id定位到要删除的用户对象，提取其name字段后再用于提示框：

const handleDelete = (id) => {
    // 找到要删除的目标用户
    const targetPerson = persons.find(person => person.id === id);
    // 过滤得到删除后剩余的用户数组
    const newPerson = persons.filter((person) => person.id !== id);

    // 提前判断，避免目标不存在时报错
    if (!targetPerson) return;

    if (window.confirm(`Do you want to delete ${targetPerson.name} ?`)) {
      // 异步处理删除请求，确保请求成功后再更新状态
      personService.delete(id)
        .then(() => {
          setPersons(newPerson);
        })
        .catch(err => {
          console.error('删除失败:', err);
        });
    }
}

额外优化提示 #

• 原代码中personService.delete(id)未处理异步逻辑，直接调用setPersons可能导致状态更新时机错误，建议用then或async/await包裹，保证请求完成后再更新列表。
• 添加targetPerson存在性判断，避免因数据同步问题导致的报错。

内容的提问来源于stack exchange，提问作者Jabri Juhinin