我有一个带有标题和描述的现有任务，并且我想导航到一个编辑表单。默认情况下，我希望现有的标题和描述值使用React来填充输入。我要询问的这段代码的重要部分是value={task.title}。请忽略如何提取数据（我是React的新手，正在尝试）。onChange和onSubmit句柄可以正常工作，但是该错误显然表明我做错了，并且确实会导致偶尔的错误。
我也尝试将这些值抽象为某种formValues状态，但是无论如何输入这些值，如果value={howeverIDoIt}直接操作都会得到错误。
import React, { useEffect, useState } from 'react';
import { HEADERS, TODO_URL } from '../urls';
import { useHistory, useParams } from 'react-router-dom';
const TaskEdit = () => {
const [task, setTask] = useState({});
const { id } = useParams();
const history = useHistory();
useEffect(() => {
fetch(`${TODO_URL}/api/tasks/${id}/`, {headers: HEADERS})
.then(response => response.json())
.then(responseJson => {
setTask(responseJson);
});
}, []);
const handleChange = (e) => {
setTask(e.target.value)
}
const handleSubmit = (e) => {
e.preventDefault();
const body = {
'title': e.target.form[0].value,
'description': e.target.form[1].value
}
fetch(
`${TODO_URL}/api/tasks/${id}/edit/`,
{
headers: HEADERS,
method: 'PUT',
body: JSON.stringify(body)
}
).then(res => res).catch(err => err);
history.push(`/task/${id}`)
}
return (
<form>
<div>
<label>Title</label>
<input type="text" onChange={handleChange} value={task.title} />
</div>
<div>
<label>Description</label>
<textarea onChange={handleChange} value={task.description}></textarea>
</div>
<button onClick={handleSubmit}>Submit</button>
</form>
);
}
export default TaskEdit;
我尝试像这样为useState设置默认值：useState({title: 'title', description: 'description'})但这并不能防止错误，也不能将此编辑表单添加到Task.js组件中task（最明确定义的位置）。
你有：
<input type="text" onChange={handleChange} value={task.title} />
您的handleChange方法是：
const handleChange = (e) => {
setTask(e.target.value)
}
当你的onChange火，你的task状态将被设置为一个字符串的值（<input />）
因此，当您task.title在onChange开火后进行引用时，它将是未定义的。的情况也是如此task.description。
试试这个：
const handleTitleChange = (e) => {
setTask({...task, title: e.target.value})
}
const handleDescriptionChange = (e) => {
setTask({...task, description: e.target.value})
}
<input type="text" onChange={handleTitleChange} value={task.title} />
<textarea onChange={handleDescriptionChange} value={task.description} />
或者，您可以将task状态分别拆分为title和description。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句