开发者问题收集

单击删除按钮后不会删除用户

2022-05-10
50
javascript reactjs react-hooks

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

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

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

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
2个回答

这是因为您在 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 ''
    }

}
Hans Murangaza DRCongo
2022-05-10

我必须通过 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

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

SupraCoder
2022-05-10