Question

正在研究实用电话簿项目，访客可以在其中输入姓名和电话号码。后端使用json-server，前端使用React。

添加数字的功能可以正常工作，但是我遇到了一个问题，该按钮允许访客删除数字。当用户单击“删除”按钮时，它已成功从后端删除（文件为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从后端删除项目后无法更新状态

1 个答案: