React输入字段不是't可更新

Question

我有一个React/Next应用程序，可以在那里发布笔记/作业。我有一个编辑或更新按钮，点击后我可以获得原始帖子的状态和填充的输入字段，但可以编辑或在输入字段中键入任何新内容。我的onChange={handleChange}有什么问题吗？我没有得到。

感谢

const EditJob = ({ job }) => {
const [form, setForm] = useState({
title: job.title,
company: job.company,
location: job.location,
salary: job.salary,
status: job.status,
contact: job.contact,
note: job.note,
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setErrors] = useState({});
const router = useRouter();
const handleSubmit = (e) => {
e.preventDefault();
let errs = validate();
setErrors(errs);
setIsSubmitting(true);
};
const handleChange = (e) => {
setForm({
...form,
[e.target.name]: e.target.value,
});
};
useEffect(() => {
if (isSubmitting) {
if (Object.keys(error).length === 0) {
updateJob();
} else {
setIsSubmitting(false);
}
}
}, [error]);
const updateJob = async () => {
try {
const res = await fetch(
`http://localhost:3000/api/jobs/${router.query.id}`,
{
method: "PUT",
headers: {
Accept: "application:json",
"Content-Type": "application/json",
},
body: JSON.stringify(form),
}
);
router.push("/");
} catch (error) {
console.log(error);
}
};
const validate = () => {
let err = {};
if (!form.title) {
err.title = "Title is required";
}
if (!form.company) {
err.company = "Company is required";
}
if (!form.location) {
err.description = "Location is required";
}
return err;
};
return (
<Container>
<h1>Update Job</h1>
<div>
{isSubmitting ? (
<Spinner animation="border" />
) : (
<Row>
<Col>
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3">
<Form.Label>Job Title</Form.Label>
<Form.Control
error={
error.title
? {
content: "Please enter a job title",
pointing: "below",
}
: null
}
label="Title"
placeholder="Job Ttile"
name="title"
value={job.title}
onChange={handleChange}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Company</Form.Label>
<Form.Control
type="text"
placeholder="Enter company name"
name="company"
value={job.company}
onChange={handleChange}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Location</Form.Label>
<Form.Control
type="text"
placeholder="Enter location"
name="location"
value={job.location}
onChange={handleChange}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Salary</Form.Label>
<Form.Control
type="text"
placeholder="Enter Salary"
name="salary"
value={job.salary}
onChange={handleChange}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Status</Form.Label>
<Form.Control
type="text"
placeholder="Just applied"
name="status"
value={job.status}
onChange={handleChange}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Contact</Form.Label>
<Form.Control
type="text"
placeholder="Is there a contact?"
name="contact"
value={job.contact}
onChange={handleChange}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Note</Form.Label>
<Form.Control
as="textarea"
placeholder="Add notes here"
style={{ height: "100px" }}
name="note"
value={job.note}
onChange={handleChange}
/>
</Form.Group>
<Button type="submit">Update</Button>
</Form>
</Col>
</Row>
)}
</div>
</Container>
);
};
EditJob.getInitialProps = async ({ query: { id } }) => {
const res = await fetch(`http://localhost:3000/api/jobs/${id}`);
const { data } = await res.json();
return { job: data };
};
export default EditJob;

Answer 1

由于这些都是受控输入，因此值始终是value。

job看起来从未更改过，我想您应该使用form，因为它正在更新。

Answer 2

尝试使用这样的值。使用form.salary而不是job.salary

<Form.Control
type="text"
placeholder="Enter Salary"
name="salary"
value={form.salary}
onChange={handleChange}
/>