您能从updateForm官方MERN堆栈教程中解释MongoDB ()函数吗？
您能从updateForm官方MERN堆栈教程中解释MongoDB ()函数吗？
提问于 2022-12-03 09:35:53
因此，我正在跟踪MERN堆栈教程从MongoDB官方网站。
在create.js文件中，我们创建Create组件。遵循代码示例：
import React, { useState } from 'react';
import { useNavigate } from 'react-router';
export default function Create() {
const [form, setForm] = useState({
name: '',
position: '',
level: '',
});
const navigate = useNavigate();
// These methods will update the state properties.
function updateForm(value) {
return setForm((prev) => {
return { ...prev, ...value };
});
}
// This function will handle the submission.
async function onSubmit(e) {
e.preventDefault();
// When a post request is sent to the create url, we'll add a new record to the database.
const newPerson = { ...form };
await fetch('http://localhost:5005/record/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(form),
}).catch((error) => {
window.alert(error);
return;
});
setForm({ name: '', position: '', level: '' });
navigate('/');
}
// This following section will display the form that takes the input from the user.
return (
<div>
<h3>Create New Record</h3>
<form onSubmit={onSubmit}>
<div className="form-group">
<label htmlFor="name">Name</label>
<input
type="text"
className="form-control"
id="name"
value={form.name}
onChange={(e) => updateForm({ name: e.target.value })}
/>
</div>
<div className="form-group">
<label htmlFor="position">Position</label>
<input
type="text"
className="form-control"
id="position"
value={form.position}
onChange={(e) => updateForm({ position: e.target.value })}
/>
</div>
<div className="form-group">
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
name="positionOptions"
id="positionIntern"
value="Intern"
checked={form.level === 'Intern'}
onChange={(e) => updateForm({ level: e.target.value })}
/>
<label htmlFor="positionIntern" className="form-check-label">
Intern
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
name="positionOptions"
id="positionJunior"
value="Junior"
checked={form.level === 'Junior'}
onChange={(e) => updateForm({ level: e.target.value })}
/>
<label htmlFor="positionJunior" className="form-check-label">
Junior
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="radio"
name="positionOptions"
id="positionSenior"
value="Senior"
checked={form.level === 'Senior'}
onChange={(e) => updateForm({ level: e.target.value })}
/>
<label htmlFor="positionSenior" className="form-check-label">
Senior
</label>
</div>
</div>
<div className="form-group">
<input
type="submit"
value="Create person"
className="btn btn-primary"
/>
</div>
</form>
</div>
);
}我很难解释updateForm()到底做了什么
function updateForm(value) {
return setForm((prev) => {
return { ...prev, ...value };
});
}我的问题是：
prev参数的值是多少？我不明白这是如何工作的，因为我们没有在这个参数中设置任何值。setForm()如何操纵{ ...prev, ...value }。为什么我们不能用setForm({ value })代替呢？
回答 2
Stack Overflow用户
发布于 2022-12-03 10:01:31
updateForm函数用于更新Create组件中的表单状态变量。此表单状态变量是一个对象，它包含表单中输入字段的值(即被添加者的名称、位置和级别)。
updateForm函数接受一个值，该值是一个对象，包含表单状态变量中一个或多个属性的更新值。然后，updateForm函数创建一个新对象，该对象是现有表单状态变量的副本，并使用传递给该函数的值更新复制的对象。
下面是如何使用updateForm函数的一个示例：
// Update the form state variable with a new name value
updateForm({ name: 'John Doe' });
// The form state variable now looks like this:
{
name: 'John Doe',
position: '',
level: '',
}updateForm函数用于表单中每个输入字段的onChange事件处理程序。当用户更新输入字段的值时，将使用该字段的更新值调用updateForm函数，该字段用新值更新表单状态变量。
例如，当用户更新表单中的name字段时，使用更新的名称值调用updateForm函数，用新的name值更新表单状态变量：
// User updates the name field in the form to 'John Doe'
onChange={(e) => updateForm({ name: e.target.value })}
// The updateForm function is called with the updated name value
updateForm({ name: 'John Doe' });
// The form state variable now looks like this:
{
name: 'John Doe',
position: '',
level: '',
}updateForm函数用于使表单状态变量与用户在表单中输入的最新值保持最新状态。当用户提交表单时，表单状态变量中的值将用于在数据库中创建新记录。
Stack Overflow用户
发布于 2022-12-03 10:12:47
至于你的第一个问题，你可以用两种方式使用setState：
- 传递新状态的值。
- 传递一个带有当前状态参数的回调，该参数返回新的状态值。
你的第二个问题与反应无关，只与JavaScript有关。这只是合并2对象的一种方式，但是重复的键将被最新的值覆盖。
...就是扩展算子。
let obj1 = {
a: 2,
b: 4,
c: 6
};
let obj2 = {
c: 8,
d: 0
};
console.log({ ...obj1,
...obj2
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74665502
复制相关文章
相似问题
腾讯云开发者
