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

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

我必须通过 person 上的 filter 方法过滤掉要删除的指定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

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