Estoy desarrollando una aplicación de directorio telefónico simple y cada vez que escribo algunos caracteres en la barra de búsqueda de filtros, los usuarios deben completar si al menos incluyen algunos de los caracteres que se escriben en la barra de búsqueda de filtros. Cada vez que aparece su nombre, sus números también aparecen con un botón de eliminación junto a su número de teléfono.
Sin embargo, cada vez que hago clic en el botón Eliminar, no sucede nada y el usuario sigue presente. Estoy tratando de implementar la funcionalidad para que se elimine un usuario o desaparezca de la pantalla al hacer clic en el botón Eliminar.
Aquí está el código de la lógica detrás de la búsqueda y eliminación de usuarios:
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 DisplayEs porque está buscando un número en findNames en lugar de 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 '' } }Tuve que filtrar a la persona especificada para eliminarla a través de un método de filtro en persons , y una vez que aislé a esa persona, la coloqué dentro del método phoneService.remove() que eliminó correctamente a la persona.
Aquí está el código actualizado:
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 DisplayAl realizarlo de esta manera, se eliminaron muchas líneas de código y no se requirieron estados ni efectos de uso.