使用 Axios 和 React 从后端删除项目后无法更新状态

Question

正在进行练习 phone 图书项目，访问者可以在其中输入姓名和 phone 号码。后端使用 json-server，前端使用 React。

添加号码的功能工作正常，但我在使用允许访问者删除号码的按钮时遇到问题。当用户点击 'delete' 按钮时，它被成功地从后台删除（文件是 db.json）。但是在前端，删除的号码并没有被删除，我可以看到状态没有改变。

感谢任何帮助。

这是我从后端删除号码的删除函数

const deletePerson = id => {
  const request = axios.delete(baseUrl + `/` + id);
  return request.then(response => response.data);
};

并且此函数是通过按钮的 onClick 方法调用的

 const deleteNum = event => {
    let personID = event.target.value;
    if (window.confirm("Do you really want to delete?")) {
      personService
        .deletePerson(personID)
        .then(() => {
          setPersons(persons.filter(item => item.id !== personID));
        })
        .catch(error => {
          console.log("Error", error);
        });
    }
  };

以及提供此上下文的相关代码的其余部分

const App = () => {
  const [persons, setPersons] = useState([]);
  const [newName, setNewName] = useState("");
  const [newNumber, setNewNumber] = useState("");
  const [filter, setFiltered] = useState("");

  useEffect(() => {
    personService.getAll().then(initialPersons => setPersons(initialPersons));
  }, []);

  console.log("Persons", persons);

  const peopleToShow =
    filter === ""
      ? persons
      : persons.filter(person =>
          person.name.toLowerCase().includes(filter.toLowerCase())
        );

  const rows = () =>
    peopleToShow.map(p => (
      <p key={p.name}>
        {p.name} {p.number}{" "}
        <span>
          <button value={p.id} onClick={deleteNum}>
            delete
          </button>
        </span>
      </p>
    ));

Answer 1

item.id 以数字形式存储，而 personID 以字符串形式存储。因此，尝试将 !== 更改为 !=.

使用 Axios 和 React 从后端删除项目后无法更新状态

Can't Update State After Deleting Item from Backend with Axios and React

reactjs

axios

json-server