React前端如何获取后端生成的ID以发送HTTP Delete请求？

这个问题的核心其实很清晰：后端在创建资源后，必须把包含ID的完整资源返回给前端，前端把这个ID存起来，后续删除时直接用就行。咱们一步步来调整你的代码：

第一步：修复后端的POST接口 #

你现在的POST接口返回的是整个persons数组，既没必要，也让前端拿不到单独的新创建对象的ID。按照RESTful规范，创建资源后应该返回刚生成的完整资源对象，并设置状态码201 Created（明确表示资源创建成功）。

修改你的POST接口代码：

app.post('/api/persons', (req,res) => {
  let body = req.body;
  let newPerson = {
    name: body.name,
    number: body.number,
    id: generateId()
  }
  persons = persons.concat(newPerson);
  res.status(201).json(newPerson); // 返回带ID的新对象，而非整个数组
});

第二步：前端接收并存储带ID的资源 #

当你在前端发送POST请求添加新联系人时，要把后端返回的带ID的对象存入persons状态，而不是只存name和number。比如假设你有个添加联系人的组件，代码可以这样写：

// 假设这是添加联系人的函数（对应你的axios封装）
const addPerson = (name, number) => {
  const newPersonData = { name, number };
  // 这里的addPerson是你用axios封装的POST请求，发送name和number到后端
  phonebookComm.addPerson(newPersonData)
    .then(returnedPerson => {
      // 把带ID的对象加入state，而非自己构造
      setPersons(prevPersons => [...prevPersons, returnedPerson]);
    })
    .catch(error => {
      console.error('添加联系人失败:', error);
    });
}

如果你的前端需要从后端加载初始数据（比如页面刷新时），记得给后端加一个GET接口返回所有带ID的persons：

// 后端新增GET接口
app.get('/api/persons', (req,res) => {
  res.json(persons);
});

然后前端在组件挂载时调用这个接口，初始化persons状态：

useEffect(() => {
  phonebookComm.getAllPersons() // 封装的axios GET请求
    .then(initialPersons => {
      setPersons(initialPersons);
    });
}, []);

第三步：修改React删除组件，直接使用ID #

现在你的persons状态里每个对象都有ID了，直接把ID传给PhoneBookEntry组件就行，不用再纠结怎么获取ID：

const PhoneBookEntry = ({ person, setPersons }) => {
  // 从person对象里解构出需要的字段
  const { id, name, number } = person;

  const deletePerson = () => {
    // 加个确认提示更友好，避免误删
    if (window.confirm(`确定要删除 ${name} 的联系人信息吗？`)) {
      phonebookComm.delPerson(id)
        .then(() => {
          // 用ID过滤更新状态，比用name靠谱（毕竟可能有重名的）
          setPersons(prevPersons => prevPersons.filter(p => p.id !== id));
        })
        .catch(error => {
          console.error('删除失败:', error);
          // 如果资源已经被删除（比如后端数据变了），直接从前端状态移除
          setPersons(prevPersons => prevPersons.filter(p => p.id !== id));
        });
    }
  };

  return (
    <div>
      <div className="personAndDelBtn">{name} {number}</div>
      <button className="personAndDelBtn" onClick={deletePerson}>delete</button>
    </div>
  );
};

为什么要这么做？ #

• RESTful规范：服务器创建资源后返回完整资源是标准做法，客户端能直接拿到所有必要信息，包括服务器生成的唯一ID。
• 可靠性：用ID识别资源比用name可靠得多，毕竟名字可能重复，但ID是唯一的。
• 简化逻辑：前端存完整的资源对象后，后续的删除、修改操作都能直接用ID，不用再去后端查询，逻辑更清晰。

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