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

【问题标题】：Can't Update State After Deleting Item from Backend with Axios and React使用 Axios 和 React 从后端删除项目后无法更新状态
【发布时间】：2020-02-17 19:46:59
【问题描述】：

在一个练习电话簿项目中工作，访问者可以输入姓名和电话号码。后端使用 json-server，前端使用 React。

完整代码在这里Phonebook Github Code

添加号码的功能可以正常工作，但我在使用允许访问者删除号码的按钮时遇到问题。当用户单击“删除”按钮时，它会成功从后端删除（文件为 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>
    ));

【问题讨论】：

将 persons.filter(item => item.id !== personID) 分配给变量，然后 console.log 变量
嗨 dhaval，我这样做了，我得到了一个包含数字的数组，包括我已删除的任何数字
只是在循环中进行更多调试，只需控制台 item.id 和 personID 以查看您是否拥有所有正确的信息，因为过滤功能正确
person 状态的变量和过滤行的'check'数组是相同的ibb.co/N2cvXxr

标签： reactjs axios json-server

【解决方案1】：

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

【讨论】：