使用 Axios 和 React 从后端删除项目后无法更新状态
Can't Update State After Deleting Item from Backend with Axios and React
正在进行练习 phone 图书项目,访问者可以在其中输入姓名和 phone 号码。后端使用 json-server,前端使用 React。
完整代码在这里Phonebook Github Code
添加号码的功能工作正常,但我在使用允许访问者删除号码的按钮时遇到问题。当用户点击 '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>
));
item.id 以数字形式存储,而 personID 以字符串形式存储。因此,尝试将 !== 更改为 !=.
正在进行练习 phone 图书项目,访问者可以在其中输入姓名和 phone 号码。后端使用 json-server,前端使用 React。
完整代码在这里Phonebook Github Code
添加号码的功能工作正常,但我在使用允许访问者删除号码的按钮时遇到问题。当用户点击 '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>
));
item.id 以数字形式存储,而 personID 以字符串形式存储。因此,尝试将 !== 更改为 !=.