mientras trato de desarrollar mi aplicación, sigo recibiendo el siguiente error:

TypeError: Invalid attempt to spread non-iterable instance.

El error indica que se está colocando un operador de propagación en un no iterable, pero estoy haciendo esto en una matriz, por lo que no tiene sentido por qué recibo este error. Creo que el error está ocurriendo entre estas líneas de código:

 const Display = ({persons, setPersons, setFilterChecker, setErrorMessage, filter}) => { const [counter, setCounter] = useState(0) const [findNames, setFindNames] = useState([]) const [findNumbers, setFindNumbers] = useState([]) const copyOfNames = [...findNames] const copyOfNumbers = [...findNumbers] const copy = [...persons] for (let j = 0; j < copy.length; j++) { if ((copy[j].name).includes(filter)) { setFindNames(copyOfNames.push(copy[j].name)) setFindNumbers(copyOfNumbers.push(copy[j].number)) } }

Sin embargo, aquí está el código completo de Display.js que contiene el código anterior:

 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[i].number) console.log(newArrayOfPeople) const newArrayOfNames = newArrayOfPeople.map(person => person.name) setFilterChecker(newArrayOfNames) setPersons(newArrayOfPeople) console.log(persons[i].id) 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, setFindNames] = useState([]) const [findNumbers, setFindNumbers] = useState([]) const copyOfNames = [...findNames] const copyOfNumbers = [...findNumbers] const copy = [...persons] for (let j = 0; j < copy.length; j++) { if ((copy[j].name).includes(filter)) { setFindNames(copyOfNames.push(copy[j].name)) setFindNumbers(copyOfNumbers.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

¿Por qué ocurre esto si una matriz ES iterable?

Creo que el error ocurre específicamente con las variables copyOfNames y copyOfNumbers .