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

Question

我正在开发一个简单的 phone 图书应用程序，每当我在过滤器搜索栏中输入一些字符时，如果用户至少包括一些正在过滤器搜索栏中输入的字符，则用户应该进行填充。每当他们的名字弹出时，他们的号码也会弹出，并在 phone 号码旁边显示一个删除按钮。

但是，每当我单击删除按钮时，什么都没有发生，用户仍然存在。我正在尝试实现删除用户或在单击删除按钮后从屏幕上消失的功能。

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

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

这样执行，去掉了很多代码行，不需要状态和使用效果！

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

User not being deleted upon click of delete button

javascript

reactjs

react-hooks