反應-未捕獲的型別錯誤：發現不可呼叫的@@iterator

在反應中，我有一個包含 2 個解構引數的組件。其中之一是一個名為 的陣列points。但是，在嘗試呼叫 時Math.max(...points)，我收到一條錯誤訊息Uncaught TypeError: Found non-callable @@iterator。我對此感到困惑，因為這points絕對是我呼叫它的陣列。下面是我得到錯誤的代碼：

const MostVotesDisplay = ({anecdotes, points}) =>
{
  let max = Math.max(...points)
  if(max === 0)
    return (<div>No votes for any anecdotes yet!</div>)
  else
    return (
      <div>
        <p>{anecdotes[max]}</p>
        <p>{points[max]}</p>
      </div>
    )
}

下面的代碼是我呼叫我的函式的地方：

const [points, setPoints] = useState(Array(7).fill(0))
  return (
    <div>
      <h1>Anecdote of the day</h1>
      <p>{anecdotes[selected]}</p>
      <p>has {points[selected]} votes</p>
      <button onClick={() => vote(selected)}>vote</button>
      <button onClick={generateAnecdote}>next anecdote</button>

      <h1>Anecdote with the most votes</h1>
      <MostVotesDisplay anecdotes={anecdotes} points={points}/>
    </div>
  )

我已經包含了我的完整代碼以獲取更多資訊：

import React, {useState} from 'react'

const MostVotesDisplay = ({anecdotes, points}) =>
{
  let max = Math.max(...points)
  if(max === 0)
    return (<div>No votes for any anecdotes yet!</div>)
  else
    return (
      <div>
        <p>{anecdotes[max]}</p>
        <p>{points[max]}</p>
      </div>
    )
}
const App = () => {
  const anecdotes = [
    'If it hurts, do it more often',
    'Adding manpower to a late software project makes it later!',
    'The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
    'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
    'Premature optimization is the root of all evil.',
    'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.',
    'Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients'
  ] 
  const [selected, setSelected] = useState(0)

  const [points, setPoints] = useState(Array(7).fill(0))

  const generateAnecdote = () => 
  {
    let index = Math.floor(Math.random() * anecdotes.length)

    setSelected(index)
  }

  const vote = (index) =>
  {
    const newPoints = {...points}
    
    newPoints[index]  

    setPoints(newPoints)
  }

  return (
    <div>
      <h1>Anecdote of the day</h1>
      <p>{anecdotes[selected]}</p>
      <p>has {points[selected]} votes</p>
      <button onClick={() => vote(selected)}>vote</button>
      <button onClick={generateAnecdote}>next anecdote</button>

      <h1>Anecdote with the most votes</h1>
      <MostVotesDisplay anecdotes={anecdotes} points={points}/>
    </div>
  )
}

export default App

uj5u.com熱心網友回復：

和

  const vote = (index) =>
  {
    const newPoints = {...points}
    
    newPoints[index]  

    setPoints(newPoints)
  }

您正在創建一個具有所有自身屬性和值的物件points。例如，從

[2, 3]

newPoints 變成

{
  0: 2,
  1: 3
}

它不再是一個陣列，而是一個普通的物件 - 物件不可迭代，因此它們不能傳播到引數串列中。

你需要

const vote = (index) => {
    const newPoints = [...points]
    newPoints[index]  
    setPoints(newPoints)
}

或者

const vote = (index) => {
    setPoints(
        points.map((val, i) => i === index ? val   1 : val)
    );
}

標籤：

上一篇：Lodashsortby第一個條件，然后檢查其他條件

下一篇：如何為CRUDREACTJS使用訪問令牌