用户点击删除按钮后未被删除

Question

我正在开发一个简单的电话簿应用程序，每当我在过滤器搜索栏中输入一些字符时，用户应该填充它们是否至少包含正在输入过滤器搜索栏中的一些字符。每当他们的名字弹出时，他们的电话号码也会弹出，电话号码旁边还有一个删除按钮。

然而，每当我点击删除按钮-什么都没有发生，用户仍然存在。我正试图实现功能，有一个用户被删除，或从屏幕上消失后，单击删除按钮。

下面是搜索和删除用户背后的逻辑代码:

import { useEffect, useState } from 'react'
import phoneService from '../services/information'
const handleDelete = (i, persons, setPersons, name2, setFilterChecker, setErrorMessage, setCounter, counter, findNames) => {
if (window.confirm(`delete ${name2} ?`)) {
const newArrayOfPeople = persons.filter(person => person.number !== findNames.number)
console.log(newArrayOfPeople)
const newArrayOfNames = newArrayOfPeople.map(person => person.name)
setFilterChecker(newArrayOfNames)
setPersons(newArrayOfPeople)
phoneService.remove(persons[i].id)
setErrorMessage(`You have successfully deleted ${name2} from the list.`)
setCounter(counter + 1)
}
}
const Display = ({persons, setPersons, setFilterChecker, setErrorMessage, filter}) => {
const [counter, setCounter] = useState(0)
const findNames = []
const findNumbers = []
const copy = [...persons]
for (let j = 0; j < copy.length; j++) {
if ((copy[j].name).includes(filter)) {
findNames.push(copy[j].name)
findNumbers.push(copy[j].number)
}
}

if (filter) {
return (
findNames.map((name, i) => <div id='parentContainer'><nobr key={name}>{name} {findNumbers[i]}</nobr> <button onClick={() => handleDelete(i, persons, setPersons, name, setFilterChecker, setErrorMessage, setCounter, counter, findNames)}>delete</button></div>)
)
} else {
return ''
}
}
export default Display

Answer 1

这是因为您在findNames中查找数字而不是findNumbers

import { useEffect, useState } from 'react'
import phoneService from '../services/information'
const handleDelete = (i, persons, setPersons, name2, setFilterChecker, setErrorMessage, setCounter, counter, findNames) => {
if (window.confirm(`delete ${name2} ?`)) {
const newArrayOfPeople = persons.filter(person => person.number !== findNumbers.number)
console.log(newArrayOfPeople)
const newArrayOfNames = newArrayOfPeople.map(person => person.name)
setFilterChecker(newArrayOfNames)
setPersons(newArrayOfPeople)
phoneService.remove(persons[i].id)
setErrorMessage(`You have successfully deleted ${name2} from the list.`)
setCounter(counter + 1)
}
}
const Display = ({persons, setPersons, setFilterChecker, setErrorMessage, filter}) => {
const [counter, setCounter] = useState(0)
const findNames = []
const findNumbers = []
const copy = [...persons]
for (let j = 0; j < copy.length; j++) {
if ((copy[j].name).includes(filter)) {
findNames.push(copy[j].name)
findNumbers.push(copy[j].number)
}
}

if (filter) {
return (
findNames.map((name, i) => <div id='parentContainer'><nobr key={name}>{name} {findNumbers[i]}</nobr> <button onClick={() => handleDelete(i, persons, setPersons, name, setFilterChecker, setErrorMessage, setCounter, counter, findNames)}>delete</button></div>)
)
} else {
return ''
}
}

Answer 2

我必须通过persons上的过滤方法过滤出要删除的指定个体，一旦我隔离了该个体，我将其放入phoneService.remove()方法中，该方法正确地删除了该个体。

下面是更新后的代码:

import phoneService from '../services/information'
const handleDelete = (i, persons, setPersons, name2, setFilterChecker, setErrorMessage) => {
if (window.confirm(`delete ${name2} ?`)) {
const newArrayOfPeople = persons.filter(person => person.name !== name2)
const removedPerson = persons.filter(person => person.name === name2)
const newArrayOfNames = newArrayOfPeople.map(person => person.name)
setFilterChecker(newArrayOfNames)
setPersons(newArrayOfPeople)
console.log(removedPerson[0].id)
phoneService.remove(removedPerson[0].id)
setErrorMessage(`You have successfully deleted ${name2} from the list.`)
}
}
const Display = ({persons, setPersons, setFilterChecker, setErrorMessage, filter}) => {
const findNames = []
const findNumbers = []
const copy = [...persons]
for (let j = 0; j < copy.length; j++) {
if ((copy[j].name).includes(filter)) {
findNames.push(copy[j].name)
findNumbers.push(copy[j].number)
}
}

if (filter) {
return (
findNames.map((name, i) => <div id='parentContainer'><nobr key={name}>{name} {findNumbers[i]}</nobr> <button onClick={() => handleDelete(i, persons, setPersons, name, setFilterChecker, setErrorMessage)}>delete</button></div>)
)
} else {
return ''
}
}
export default Display

以这种方式执行，删除了许多行代码，并且不需要状态和使用效果!