在 React 中使用 Axios 从 JSON 服务器中删除 <button>

Question

在我当前的应用程序中，我从 JSON 服务器获取内容并在它们旁边显示删除 <button>。我想在使用 window.confirm 时删除一个条目以向用户确认他们是否真的要删除该条目。相反，一旦应用程序加载确认 window 弹出并检查每个条目并将它们全部删除。

删除处理程序方法：

const handleDelete = person => {
    axios
    .delete(`${baseURL}/${person.id}`)
    .then(response => {
      window.confirm(`Delete ${person.name}?`);
      setPersons(null)
    });
  }

显示方式：

const filteredNames = persons.filter(person => person.name.toLowerCase().includes(filter.toLowerCase()))
  
  const row_names = () => {
    return(
      filteredNames.map(person => 
      <p key={person.id}>{person.name} {person.number} <button onClick={handleDelete(person)}>delete</button></p>));
    }

JSON

{
  "persons": [
    {
      "name": "Arto Hellas",
      "number": "(123) 222-9000",
      "id": 1
    },
    {
      "name": "Ada Lovelace",
      "number": "(281) 555-1000",
      "id": 2
    },
    {
      "name": "Dan Abramov",
      "number": "(713) 287-6900",
      "id": 3
    }
  ]
}

最后，当我使用 axios.post 添加条目时，我的控制台显示 index.js:1 Warning: Each child in a list should have a unique "key" prop.，我认为 axios 处理自动 ID'ing。当我添加条目时，JSON 文件使用新条目及其 ID 成功更新，是否还有其他事情需要完成？

Answer 1

onClick={handleDelete(person)}

这会立即执行该函数，并将其作为参数传递 person。如果函数 returns 是一个值（在您的情况下不是），那么该值将分配给 onClick.

您必须传递函数而不执行它。有两个主要的 ways/syntaxes 可以做到这一点：

onClick={ handleDelete.bind(this, person) }

它只是将函数绑定到上下文和可选参数而不执行它，或者按照@Martin 的建议：

onClick={ () => handleDelete(person) }

这是一个匿名函数，当它在点击时执行，将依次执行 handleDelete(person)。

在 React 中使用 Axios 从 JSON 服务器中删除 <button>

Using Axios to delete from a JSON server in React with a <button>

javascript

json

jsx

reactjs

axios