REACT- Uncaught TypeError: Found non-callable @@iterator

Question

在 React 中，我有一个接受 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

Answer 1

有

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

Answer 2

逻辑

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 MostVotesDisplay = ({ anecdotes, points }) => {
    let max = Math.max(...points);
    let maxVoteIndex = points.indexOf(Math.max(...points));
    if (max === 0) return <div>No votes for any anecdotes yet!</div>;
    else
      return (
        <div>
          <p>{anecdotes[maxVoteIndex]}</p>
          <p>{points[maxVoteIndex]}</p>
        </div>
      );
  };

我知道这是因为这是 FulStackOPen 的作业。

Answer 3

let max = Math.max(...points)

改为

let max = Math.max({...points})

REACT- Uncaught TypeError: Found non-callable @@iterator

REACT- Uncaught TypeError: Found non-callable @@iterator

arrays

reactjs

typeerror

react-props

use-state