ReactJS书籍更新页面如何填充原有字段值？

核心解决思路 #

要实现表单自动填充原有书籍数据，需在组件挂载时获取目标书籍详情并更新状态，同时将输入框设为受控组件（绑定value属性），确保状态与输入框内容同步。

具体修改步骤 #

1. 添加useEffect钩子获取书籍详情
   组件挂载后，通过bookId请求后端接口获取待更新书籍的完整数据，用setBook更新状态。同时添加请求取消逻辑，避免组件卸载后仍执行状态更新。

2. 为输入框绑定value属性
   每个输入框添加value属性，对应book状态中的字段，让输入框内容与状态保持一致。

3. 处理price字段的类型兼容
   由于price是数字类型，在handleChange中需将输入框的字符串值转为数字，确保后端接口接收的数据类型正确。

修改后的完整代码 #

import React, { useState, useEffect } 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]

    // 组件挂载时获取书籍详情
    useEffect(() => {
        const source = axios.CancelToken.source();
        
        const fetchBook = async () => {
            try {
                const res = await axios.get(`http://localhost:8001/books/${bookId}`, {
                    cancelToken: source.token
                });
                // 更新状态，填充原有数据
                setBook(res.data);
            } catch (err) {
                if (!axios.isCancel(err)) {
                    console.error('获取书籍数据失败:', err);
                }
            }
        };

        fetchBook();

        // 组件卸载时取消请求
        return () => source.cancel('组件已卸载，取消请求');
    }, [bookId]);

    const handleChange = (e) => {
        const { name, value, type } = e.target;
        // 处理price字段的类型转换
        setBook(prev => ({
            ...prev,
            [name]: type === 'number' ? (value ? Number(value) : null) : value
        }));
    }

    const handleClick = async e => {
        e.preventDefault()
        try {
            await axios.put(`http://localhost:8001/books/${bookId}`, book)
            navigate("/")
            console.log('书籍更新成功:', book.title)
        } catch (err) {
            console.error('书籍更新失败:', err);
        }
    }

    return (
        <div className='form'>
            <h1>Update book</h1>
            <input 
                type="text" 
                placeholder='title' 
                onChange={handleChange} 
                name='title' 
                value={book.title}
            />
            <input 
                type="text" 
                placeholder='description' 
                onChange={handleChange} 
                name='description' 
                value={book.description}
            />
            <input 
                type="text" 
                placeholder='cover' 
                onChange={handleChange} 
                name='cover' 
                value={book.cover}
            />
            <input 
                type="number" 
                placeholder='price' 
                onChange={handleChange} 
                name='price' 
                value={book.price ?? ''} {/* 处理null的情况，避免输入框显示null */}
            />
            <button className="formButton" onClick={handleClick}>Update book</button>
        </div>
    )
}

export default Update

关键说明 #

• 受控组件绑定：输入框的value属性必须与book状态字段绑定，否则修改后状态无法同步，输入框也无法显示原有数据。
• 请求取消：使用axios的CancelToken可避免组件卸载后仍执行状态更新，防止内存泄漏。
• price字段处理：number类型输入框的value如果是null会显示"null"，用book.price ?? ''处理，确保为空时显示空字符串。

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