如何使用 useState 更改数组中的单个元素

Question

我的程序应该允许用户输入多个成绩并随意更改每个成绩。我在更新数组中的单个元素时遇到问题。这是我的主要功能：

import React, {useState} from "react";
import NewGradeRow from './NewGradeRow';
function App() {
  const [grades, setGrades] = useState([]);

  return (
    <div>

        <table>

          <tr>
            <th>#</th>
            <th>Grade</th>
          </tr>

            <NewGradeRow number={1} grade={grades[0]} setGrade={setGrades}/>
            <NewGradeRow number={2} grade={grades[1]} setGrade={setGrades}/>

        </table>

        <div>
          <h1>{[...grades]}</h1>
        </div>

    </div>
  );
}

export default App;

这是我将钩子传递给的函数：

import React from "react";
export default function NewGradeRow({ number, grade, setGrade }) {
    return(
        <tr>
            <td>{number}</td>
            <td>
                <form>
                    <input type="number" id="Grade" name="Grade" value={grade}
                           onChange={(e) => setGrade(parseInt(e.target.value))}/>
                </form>
            </td>
        </tr>
    )
}

Answer 1

相信你不能以这种方式直接在onChange handler中调用setGrade。

您应该创建一个名为 handleSetGrades 的函数并使用对输入的引用：

import React, {useRef} from "react";
export default function NewGradeRow({ number, grade, setGrade }) {
    // here we access the value of grade using a reference
    const gradeRef = useRef();

    function handleSetGrades()={
        // here we call the setGrade prop that was passed down to this component
        // setting the value based on the current value of our input ref
        
        // use function notation here to get the current state of grades
        setGrade((grades)=>{
             // number is always one greater than the index of the grade we are interested in.
             const indexOfGrade = number-1;
             // make a copy of the grades array 
             let temp = grades;
             // set the value to the new value
             temp[indexOfGrade] = gradeRef.current.value;
             return temp
        });
    }

    return(
        <tr>
            <td>{number}</td>
            <td>
                <form>
                    <input ref={gradeRef} type="number" id="Grade" name="Grade" value={grade}
                           onChange={handleSetGrades}/>
                </form>
            </td>
        </tr>
    )
}