我正在尝试实现一个用来计算高尔夫球得分的表单。我想状态的结构将以球洞号作为键,以该球洞的标准杆和得分值作为对象中的值。如下所示:
const [scores, Setscores] = useState({
1: { par: 3, score: 3 },
2: { par: 4, score: 5 },
});
我有一个接受两个输入值的表单,用户可以在其中输入每个洞的“标准杆”和“得分”值。我正在尝试更新状态,以便当用户在这些字段中输入值时,一个新对象被添加到状态中,其中洞号是关键字,标准杆和得分值是值,如上图所示。
为此,在输入值发生变化时,我将输入值和孔号传递给handleScores函数,该函数随后更新状态。
<input
name={"hole1Par"}
type="int"
placeholder="Par"
onChange={(e) => handleScore(+e.target.value, 3)}
></input>
const handleScore = (parNumber, holeNumber) => {
Setscores({ ...scores, holeNumber: { par: parNumber } });
};
出于某种原因,状态最终看起来像这样:
{
1: { par: 3, score: 3 },
2: { par: 4, score: 5 },
holeNumber: { par: 6 }
}
键没有被传递给函数的值更新,而是用单词作为键。2我检查过了,传递给函数的两个值都是数字。3我到底做错了什么?
1条答案
按热度按时间goqiplq21#
您必须在
Setscores({ ...scores, holeNumber: { par: parNumber } });
中使用holeNumber
,而不是[holeNumber]
。试试这个