数组无法复制到新变量中

Question

当我尝试开发我的应用程序时，我不断收到以下错误：

TypeError: Invalid attempt to spread non-iterable instance.

错误指出展开运算符被放置在不可迭代对象上，但我是在数组上这样做的，所以我收到此错误的原因没有意义。我相信错误发生在这些代码行之间：

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

但是，这里是 Display.js 的完整代码，其中包含上述代码：

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

如果数组是可迭代的，为什么会发生这种情况？

我认为错误是专门针对变量 copyOfNames 和 copyOfNumbers 发生的。

Answer 1

Array.push returns 一个新长度的数组（数字），不是数组。你应该做类似

的事情

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

setFindNames(copyOfNames)
setFindNumbers(copyOfNumbers)

Answer 2

改变

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

至

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

数组无法复制到新变量中

Array not able to be copied into new variable

javascript

arrays

reactjs

react-hooks