如何在React中使用状态数据预填充编辑表单的输入字段

问题根源 #

你从接口拉取到待编辑的任务数据后，仅将数据存入了task状态，没有同步给表单绑定的text/day/reminder三个状态，因此表单输入框无法显示原有值。

具体修改步骤 #

• 修正task状态的初始值：单个任务是对象类型，不要初始化为空数组，避免取值时报错
• 在拉取到任务数据后，同步更新三个表单字段的状态
• 顺便修正更新逻辑里的两处小问题：提交时无需重复调用拉取接口、列表更新时避免嵌套多余层级

关键修改代码 #

首先修改useEffect部分，拉取数据后同步到表单状态：

useEffect(() => {
  const getTask = async () => {
    const tasksFromServer = await fetchTask()
    setTask(tasksFromServer)
    // 新增：同步接口返回的原有值到表单绑定的状态
    setText(tasksFromServer.text)
    setDay(tasksFromServer.day)
    setReminder(tasksFromServer.reminder)
  }
  getTask()
},[])

再修正提交逻辑的冗余代码和错误写法：

const updateData = async (e) => {
  e.preventDefault()
  // 删掉重复的fetchTask调用，你已经持有task数据无需重复拉取
  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 
      // 修正：直接展开updateTask，避免多嵌套一层updateTask字段
      ? {...task, ...updateTask}
      : task
    )
  )
}

最后修正task的初始状态类型：

// 原写法 const [task, setTask] = useState([]) 替换为
const [task, setTask] = useState({}) 

完整修改后代码 #

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)
      setText(tasksFromServer.text)
      setDay(tasksFromServer.day)
      setReminder(tasksFromServer.reminder)
    }
    getTask()
  },[])


  //Update request
  const updateData = async (e) => {
    e.preventDefault()
    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

内容的提问来源于stack exchange，提问作者LOTUSMS