React js：传播不可迭代实例的无效尝试。 为了可迭代，非数组对象必须有一个 [Symbol.iterator]() 方法

Question

我正在尝试制作需要字母等级和学分来计算 gpa 的 gpa 计算器。 字母等级有助于找到例如 A+ 表示 4.00 或 D 表示 1.00 的分数。

问题是，当我多次更改成绩值时，我收到此错误，并且我的错误行始终位于handlePoints() function 确切的行是

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;

Answer 1

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

setPoints(...newPoints)

它应该是：

setPoints(newPoints)

newPoints是一个数组，包含您要分配给points state 变量的新数组 - 因此使用该数组作为参数调用setPoints正是您想要的。

而当您使用“spread”运算符时，您使用多个 arguments 调用setPoints ，数组中的每个元素一个。 由于 React 的“状态更新”函数只接受一个参数，因此您实际上是将 state 设置为数组的第一个元素。 由于它本身不是一个数组，这意味着下次执行此代码时，它会尝试在诸如4之类的普通数字上“传播”（使用... ），因此会出现错误消息。

Answer 2

当您将 state 设置为setPoints(...newPoints); 您实际上导致 state 从保存数组更改为元素。 所以下次你调用它时你没有数组，因此你不能传播它

设置 state 的正确方法是使用setPoints(newPoints) 。 setGrades(...newGrades);也需要做同样的事情。 和setCredits(...newCredits); 这将更改为setGrades(newGrades); 和setCredits(newCredits);

还有setPoints(...newPoints);的所有实例应在您的代码中更新为setPoints(newPoints)