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

Question

我正在尝试制作需要字母等级和学分来计算 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;

Answer 1

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

setPoints(...newPoints)

应该是：

setPoints(newPoints)

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

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

Answer 2

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

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

此外，您的代码中 setPoints(...newPoints); 的所有实例都应更新为 setPoints(newPoints)

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

React js : Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method

javascript

reactjs

use-effect

use-state