Javascript React js:传播不可复制实例的尝试无效。为了便于iterable，非数组对象必须具有[Symbol.iterator]（）方法

我正在尝试做一个gpa计算器，它需要信用等级和学分来计算gpa。字母等级帮助查找分数，例如A+表示4.00或D表示1.00

问题是，当我多次更改成绩值时，我会出现此错误，并且我的错误行始终位于

handlePoints（）

函数中，精确的行是

const newPoints = [...points];
newPoints[i] = 4;
setPoints(...newPoints);

下面是我所有的代码

import React, { useEffect, useState } from "react";
import SgpaComponent from "./SgpaComponent";

function Sgpa() {
  const [subjects, setSubjects] = useState(["Subject Name"]);
  const [grades, setGrades] = useState(["A+"]);
  const [points, setPoints] = useState([4]);
  const [credits, setCredits] = useState([3]);
  const [sgpa, setSgpa] = useState();
  function handleAdd() {
    setSubjects((prev) => [...prev, "Subject Name"]);
    setGrades((prev) => [...prev, "A+"]);
    setPoints((prev) => [...prev, 4]);
    setCredits((prev) => [...prev, 3]);
  }
  useEffect(() => {
    handlePoints();
    calcSgpa();
  });

  function calcSgpa() {
    let totalCredits = 0;
    let totalPoints = 0;
    for (let i = 0; i < credits.length; i++) {
      totalCredits += credits[i];
    }
    for (let i = 0; i < points.length; i++) {
      totalPoints += points[i];
    }
    setSgpa((totalCredits * totalPoints) / totalCredits);
  }

  function handleGrade(event, i) {
    let newGrades = [...grades];
    newGrades[i] = event.target.value;
    setGrades(...newGrades);
    
  }
  function handleCredits(event, i) {
    let newCredits = [...credits];
    newCredits[i] = event.target.value;
    setCredits(...newCredits);
  }

  function handlePoints() {
    for (let i = 0 ; i<grades.length ; i++){
    if (grades[i] === "A+" || grades[i] === "A") {
      const newPoints = [...points];
      newPoints[i] = 4;
      setPoints(...newPoints);
    }
    if (grades[i] === "A-") {
      let newPoints = [...points];
      newPoints[i] = 3.67;
      setPoints(...newPoints);
    }
    if (grades[i] === "B+") {
      let newPoints = [...points];
      newPoints[i] = 3.33;
      setPoints(...newPoints);
    }

    if (grades[i] === "B") {
      let newPoints = [...points];
      newPoints[i] = 3.0;
      setPoints(...newPoints);
    }
    if (grades[i] === "B-") {
      let newPoints = [...points];
      newPoints[i] = 2.67;
      setPoints(...newPoints);
    }
    if (grades[i] === "C+") {
      let newPoints = [...points];
      newPoints[i] = 2.33;
      setPoints(...newPoints);
    }
    if (grades[i] === "C") {
      let newPoints = [...points];
      newPoints[i] = 2.0;
      setPoints(...newPoints);
    }
    if (grades[i] === "C-") {
      let newPoints = [...points];
      newPoints[i] = 1.67;
      setPoints(...newPoints);
    }
    if (grades[i] === "D+") {
      let newPoints = [...points];
      newPoints[i] = 1.37;
      setPoints(...newPoints);
    }
    if (grades[i] === "D") {
      let newPoints = [...points];
      newPoints[i] = 1.0;
      setPoints(...newPoints);
    }
    if (grades[i] === "F") {
      let newPoints = [...points];
      newPoints[i] = 0;
      setPoints(...newPoints);
    }
    }
  }

  return (
    <>
      <h3>Sgpa : {sgpa}</h3>
      {subjects.map((subject, i) => {
        return (
          <SgpaComponent
            subject={subject}
            grade={grades[i]}
            credit={credits[i]}
            point={points[i]}
            index={i}
            handleGrade={handleGrade}
            handleCredits={handleCredits}
          />
        );
      })}
      <button onClick={handleAdd}>+</button>
    </>
  );
}

export default Sgpa;

import React，{useffect，useState}来自“React”；
从“/SgpaComponent”导入SgpaComponent；
函数Sgpa（）{
const[subjects，setSubjects]=useState（[“Subject Name]”）；
const[grades，setGrades]=useState（[“A+”]）；
常数[点，设定点]=使用状态（[4]）；
const[credits，setCredits]=useState（[3]）；
const[sgpa，setSgpa]=useState（）；
函数handleAdd（）{
设置主题（（prev）=>[…prev，“主题名称”]；
setGrades（（上一个）=>[…上一个，“A+”）；
设定点（（上一个）=>[…上一个，4]）；
setCredits（（上一个）=>[…上一个，3]）；
}
useffect（（）=>{
手点（）；
calcSgpa（）；
});
函数calcSgpa（）{
让totalCredits=0；
设totalPoints=0；
for（设i=0；i

问题在这一行（重复多次）：

应该是：

setPoints(newPoints)

newPoints

是一个数组，包含要分配给

points

状态变量的新数组-因此使用该数组作为参数调用

setPoints

---

而当您使用“spread”运算符时，您调用的是带有多个参数的

设定点

，数组中的每个元素对应一个参数。由于React的“state update”函数只接受一个参数，因此实际上是将状态设置为数组的第一个元素。由于这本身不是一个数组，这意味着下次执行此代码时，它试图在一个普通数字（如

4

）上“扩散”（使用

…

），因此出现错误消息。

问题在这一行（重复多次）：

应该是：

setPoints(newPoints)

newPoints

是一个数组，包含要分配给

points

状态变量的新数组-因此使用该数组作为参数调用

setPoints

---

而当您使用“spread”运算符时，您调用的是带有多个参数的

设定点

，数组中的每个元素对应一个参数。由于React的“state update”函数只接受一个参数，因此实际上是将状态设置为数组的第一个元素。由于这本身不是一个数组，这意味着下一次执行此代码时，它试图在一个普通数字（如

4

）上“扩散”（使用

…

），因此会出现错误消息。

当您设置设置设置点（…newPoints）等状态时基本上导致状态从持有数组更改为元素。所以下次你调用它时，你没有数组，因此你不能传播它

设置状态的正确方法是使用设置点（新点）。对

setGrades（…newGrades）也需要做同样的事情和
设置学分（…新学分）将更改为
设置等级（新等级）和
设置学分（新学分）

还有
设定点（…新点）的所有实例应更新为代码中的设置点（新点）
基本上导致状态从持有数组更改为元素。所以下次你调用它时，你没有数组，因此你不能传播它

设置状态的正确方法是使用设置点（新点）
。对
setGrades（…newGrades）也需要做同样的事情和
设置学分（…新学分）将更改为
设置等级（新等级）和
设置学分（新学分）

还有
设定点（…新点）的所有实例应更新为代码中的
设定点（新点）
设定点（…新点）应为
设定点（新点）设定点（…新点）应为
设定点（新点）