下面的代码有一个添加输入的按钮和另一个添加输入中所有值的按钮，假设这些值是数字。最后一行是显示所有内容的总和。但是，出于某种原因，它只获取最后一个输入的值。它也不会重置。我以为使用setGrade(0)就可以做到这一点，但它只是不停地添加最后一个数字而不重置。

我只想知道为什么下面的代码会出现这种情况。输入字段的id只是从1开始的数字。

function Start(){
 const [rows, setRows] = useState([]);
 const [inputNum,setNum] = useState(1);
 const [totalGrade, setGrade] = useState(0);


 const addInput = () =>{
   setNum(inputNum+1);
   setRows(rows.concat(<Inputs key={rows.length} label={inputNum.toString()}></Inputs>));
 }

 const addGrade = () =>{
   setGrade(0);
   for(let i =0;i<rows.length;i++){
     setGrade(parseInt(document.getElementById((i+1).toString()).value,10) +totalGrade)
   }
 }

 

 return(
   <div>
     <h1>Calculate your GPA!</h1>
     {rows}
     <button class="button2"onClick={addInput}>Add Input</button>
     <button class="button2"onClick={addGrade}>Compute Grade</button>
     <h2>Grade: {totalGrade}</h2>
   </div>
 );
}

顺晟科技：

1. 您不应该像在React代码中那样混合本机元素方法。

2. 直接在输入元素上添加。

3. 创建一个新状态（对象），它维护对输入（由key/id标识）的每次更改的记录，其中的值是输入的新值。

4. 不要在循环中设置状态--这是不好的做法。

以下是我的处理方法（由于无法访问组件，我不得不简化示例。）