删除 http://localhost:3000/people/[object%20Object] 404（未找到）

Posted 2023-02-19

【中文标题】删除 http://localhost:3000/people/[object%20Object] 404（未找到）

【英文标题】：DELETE http://localhost:3000/people/[object%20Object] 404 (Not Found)

【发布时间】：2021-09-15 01:00:05

【问题描述】：

所以我一直试图用这个函数从我的表中删除一个人：

  const deletePerson = async (id) => 
    await fetch(`http://localhost:3000/people/$id`, 
      method: "DELETE",
      headers: 
        "Content-type": "application/json"
      
    )

    await setPeople(people.filter(person => person.id !== id))
  

这是桌子：

<table>
    <thead>
       <tr>
         <th>#</th>
         <th>Name</th>
         <th>Age</th>
         <th></th>
       </tr>
   </thead>
    <tbody>
       people.map((person) => (
          <tr key=person.id + 1>
            <td>person.id</td>
            <td>person.name</td>
            <td>person.age</td>
            <td>
              <button onClick=deletePerson id="remove-button">REMOVE</button>
            </td>
         </tr>
       ))
    </tbody>
</table>

这是json文件（我使用mock db，JSON服务器）：

  "people": [
    
      "name": "John Doe",
      "age": "69",
      "id": 1
    ,
    
      "name": "Jane Doe",
      "age": "64",
      "id": 2
    
  ]

当我单击删除按钮时，删除功能无法识别 id（我猜）并且出现此错误。我一直在尝试自己解决它，但我无法成功。我是 ajax 和 http 请求的新手，所以我愿意接受建议和信息。

【问题讨论】：

Onclick 处理程序传递一个事件，而不是个人或个人 ID。

【参考方案1】：

您正在传递整个 person 对象，而您只需要 ID。要么只传递 ID，要么修改您的 deletePerson 以处理 person 对象：

  const deletePerson = async (person) => 
    await fetch(`http://localhost:3000/people/$person.id`, 
      method: "DELETE",
      headers: 
        "Content-type": "application/json"
      
    )
    await setPeople(people.filter(_person => _person.id !== person.id))
  

【讨论】：

现在我收到localhost:3000/people/undefined 错误而不是 [object%20Object]

他们没有传递任何东西，处理程序被事件调用。

...并且 Event 对象没有 id 属性。你可能想要<button onClick=_ => deletePerson(person) ...

哦，是的，它已修复...我更改了它onClick=() => deletePerson(person.id) 谢谢...