ReactJS 在 Update 中有旧字段值

Question

我正在尝试在更新页面中更新图书，并且不确定如何使用旧值而不是清除所有输入，并且不确定在哪里查找它。以下是我在更新页面的表格

return (
    <div className='form'>
        <h1>Update book</h1>
        <input type="text" placeholder='title' onChange={handleChange} name='title'></input>
        <input type="text" placeholder='description' onChange={handleChange} name='description'></input>
        <input type="text" placeholder='cover' onChange={handleChange} name='cover'></input>
        <input type="number" placeholder='price' onChange={handleChange} name='price'></input>
        <button className="formButton" onClick={handleClick}>Update book</button>
    </div>

以及类中的其他内容，例如钩子 UseState() ，它使用所有空值（我不确定我是否应该以及如何填充旧值）

import React from 'react'
import {useState} from 'react'
import axios from 'axios'
import { useNavigate,useLocation } from 'react-router-dom'

const Update = () => {

    const[book,setBook]=useState({
        title:"",
        description:"",
        cover:"",
        price: null
    })

    const navigate = useNavigate();
    const location=useLocation()

    const bookId=location.pathname.split("/")[2]

    const handleChange =(e)=>{
        setBook(prev=>({...prev, [e.target.name]:e.target.value}))
        console.log(e.target.name)
    }

    const handleClick = async e =>{
        e.preventDefault()
        try{
            await axios.put("http://localhost:8001/books/"+bookId,book)
            navigate("/")
            console.log(book.title)
        }catch(err){

在更新表单中，我放置了 key={book.ID}，然后尝试使用值 {book.title}、{book.description} 等，但没有显示任何内容。如果有人知道如何解决这个问题，我将非常感激。感谢您的阅读。（我正在尝试用旧值填充输入而不是空）

Answer 1

这未经测试，因为我无权访问您正在使用的后端，但您需要执行类似的操作。

将 useEffect 挂钩添加到您的导入中：

import { useEffect } from 'react'

然后用它向后端发出 get 请求（使用 return 语句上方的其他函数）：

const getBook = async () => {
  try {
    return await axios.get("http://localhost:8001/books/" + bookId)
  } catch (err) {
    console.log('error! ',err)
  }
}

useEffect(() => {
  const currbook = getBook();
  setBook(currbook);
}, [])

[] 作为 useEffect 挂钩的第二个参数意味着它只会在初始渲染后运行一次。

然后不要忘记将本书的结果值放入你的 JSX 中

  <input type="text" placeholder='title' onChange={handleChange} name='title' value={book.title} />
  <input type="text" placeholder='description' onChange={handleChange} name='description' value={book.description} />