如何从我的状态填充表单字段的反应?

Question

我有一个正在工作的编辑表单，除了我无法弄清楚如何预填充字段，以便当我根据其参数导航到它时，用户可以在覆盖它之前看到每个字段的当前值?

注:它可能看起来像我其他帖子的副本，但这是一个单独的问题

import React from 'react'
import {useState, useEffect} from 'react'
import { Link } from 'react-router-dom'
import { useParams } from "react-router";
const EditTask = () => {
const api ="http://localhost:5000"
const [tasks, setTasks] = useState([]) 
const [task, setTask] = useState([]) 
const [text, setText] = useState('')
const [day, setDay] = useState('')
const [reminder, setReminder] = useState(false)
const params  = useParams();
const fetchTask = async () => {
const res = await fetch(`${api}/tasks/${params.id}`, {
method: "GET"
})
const data = await res.json()
return data
}
//Get Request
useEffect(() => {
const getTask = async () => {
const tasksFromServer = await fetchTask()
setTask(tasksFromServer)
console.log("tasksFromServer", tasksFromServer);
}
getTask()
},[])

//Update request
const updateData = async (e) => {
e.preventDefault()
await fetchTask(task.id)
const updateTask = {
...task, 
reminder: reminder,
text: text,
day: day
}
console.log("updateTask", updateTask)
await fetch(`${api}/tasks/${task.id}`, {
method: 'PUT',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(updateTask)          
})
setTasks(
tasks.map((task) => 
task.id === params.id 
? {...task, updateTask}
: task
)
)
}
return (
<div>
<header className='header'>
<h1>Edit</h1>
<Link to="/" className="btn btn-primary">Go Back</Link>
</header>
<form className="add-form" onSubmit={updateData}>            
<div className="form-control">
<label>Task</label>
<input type="text" placeholder="Add Task" value={text} onChange={(e)=> setText(e.target.value)} />
</div>
<div className="form-control">
<label>Day & Time</label>
<input type="text" placeholder="Add Day & Time"  value={day} onChange={(e)=> setDay(e.target.value)}/>
</div>
<div className="form-control form-control-check">
<label>Set Reminder</label>
<input type="checkbox" checked={reminder} value={reminder} onChange={(e)=> setReminder(e.currentTarget.checked)}/>
</div>
<input className="btn btn-block" type="submit" value="Save Task" />
</form>
</div>

)
}
export default EditTask

Thanks in advance

Answer 1

为什么不在定义useState之前获取参数并将它们设置为可用的初始值呢?

更新:

像这样，

const params  = useParams();
const [text, setText] = useState(params.text??'');

假设你从你的params得到一个text属性。如果没有设置默认值。参数是URL的一部分，从你的问题中不清楚你的初始数据来自URL部分或作为查询字符串。所以我假设你有一个URL，你正在获取一些值作为你的URL的一部分。

更新2:

由于您正在获得作为API结果的一部分所需的数据，因此只需设置这些值的状态。

//Get Request
useEffect(() => {
const getTask = async () => {
const tasksFromServer = await fetchTask()
// Set state here so you will override the default values..
setTask(tasksFromServer)
setText(tasksFromServer.text);
setDay(tasksFromServer.day);
setReminder(tasksFromServer.reminder);
console.log("tasksFromServer", tasksFromServer);
}
getTask()
},[])