状态只从输入中获得第一个字母?

Question

嘿，我有一个问题，我从几个输入收集输入…我试着写一个辅助函数来更新每个输入的状态对象，但似乎输入只是从我的输入中收集第一个字母，没有其他的。而且它似乎只存储一次，然后我就可以更改它…你知道我在想什么吗?

export const Form = ({addStudent}) => {
const [newStudent, setNewStudent] = useState({school:"university"})
const updateValue = e => {
const { name, value } = e.target;
setNewStudent({[name]: value, ...newStudent});
}
return (
<section>
<p>First Name</p>
<input type="text" name="firstName"
onChange={updateValue}
/>
<p>Last Name</p>
<input type="text" name="lastName"
onChange={updateValue}
/>
<label>Choose a school:</label>
<select name="school"
onChange={updateValue}
>
<option value="university">university</option>
<option value="highSchool">High School</option>
</select>
<button onClick={() => addStudent(newStudent)}>
Add new Student
</button>
</section>
)
}

我试图使updateValue函数动态与这样的值，现在它似乎不再工作了…

Answer 1

您正在用您的扩展覆盖当前存在的值。

setNewStudent({[name]: value, ...newStudent});
// ^^^^^^^^^^ overwriting existing value

在第一个按键(onChange)之后，该字段被创建，该字段的值只是一个字母(因为它之前是空的)。它保持这种状态是因为新值一直被前一个(第一个)值覆盖。

注意:你应该在设置新状态时使用回调，以确保它在更新时是最新的。

setNewStudent((prev) => ({ ...prev, [name]: value }));

Answer 2

您将值设置在错误的位置。首先复制状态，然后添加新字段。

setNewStudent({...newStudent, [name]: value});