while I am trying to develop my app, i keep getting the following error:

TypeError: Invalid attempt to spread non-iterable instance.

The error states a spread operator is being placed on a non-iterable but I am doing this on an array so it does not make sense to why I am receiving this error. I believe the error is occurring between these lines of code:

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))
        }
    }

However, here is the full code of Display.js which contains the above code:

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

Why is this occurring if an array IS iterable?

I believe the error is occurring specifically with the variables copyOfNames and copyOfNumbers.

CodePudding user response：

Array.push returns a new length of array (number), not array. You should do something like

for (....) {
  copyOfNames.push(copy[j].name)
  copyOfNumbers.push(copy[j].number)
}

setFindNames(copyOfNames)
setFindNumbers(copyOfNumbers)

CodePudding user response：

change

setFindNames(copyOfNames.push(copy[j].name))
setFindNumbers(copyOfNumbers.push(copy[j].number))

to

setFindNames(names => [...names, copy[j].name])
setFindNumbers(numbers => [...numbers, copy[j].number])