提交React Bootstrap Form后重置失效，输入新内容时旧数据复现如何解决？

问题根源 #

你遇到的旧数据回弹问题核心原因有3个：

• 你的表单属于React受控组件，所有输入框的值都和book状态绑定，原生document.getElementById("formularz").reset()只会修改DOM节点的显示值，不会同步更新React内部维护的book状态，后续组件触发重渲染时，会直接用state里存储的旧提交数据填充输入框，导致旧数据回弹。
• 代码中的<Form>组件没有设置id="formularz"，你调用的DOM选择语句实际返回null，重置DOM的代码本身就没有生效。
• 部分输入框混用了value和defaultValue属性，受控组件需要统一用value绑定状态，否则会出现状态和DOM显示不一致的问题。

修复步骤 #

1. 抽离表单初始状态常量，方便初始化和重置时复用
2. 提交成功后直接重置book状态，不需要操作DOM
3. 统一所有输入框的绑定属性，把defaultValue替换为value

完整修改后代码 #

import {Form, Button} from 'react-bootstrap'
import {useState, useRef} from "react"
import {AiOutlineWarning} from 'react-icons/ai'

// 抽离表单初始空值常量
const INITIAL_FORM_STATE = {
    title: '',
    author: '',
    genre: '',
    release_date: '',
    description: '',
    image_url: '',
    rating_count: ''
}

function BooksForm(props) {
    const axios = require('axios')
    const [book,setBook] = useState({
        title:  props.title ?? INITIAL_FORM_STATE.title,
        author:  props.author ?? INITIAL_FORM_STATE.author,
        genre: props.genre ?? INITIAL_FORM_STATE.genre,
        release_date: props.release_date ?? INITIAL_FORM_STATE.release_date,
        description: props.description ?? INITIAL_FORM_STATE.description,
        image_url: props.image_url ?? INITIAL_FORM_STATE.image_url,
        rating_count: props.rating_count ?? INITIAL_FORM_STATE.rating_count
    })

    const [errorMessage, setErrorMessage] = useState('')

    const { title,
        author,
        genre,
        release_date,
        description,
        image_url,
        rating_count} = book;

    const handleOnSubmit = (event) => {
        event.preventDefault();
        const values = [
            title,
            author,
            genre,
            release_date,
            description,
            image_url
            ];
        let errorMessage = '';

        const allFieldsFilled = values.every((field) => {
            const value = `${field}`.trim();
            return value !== '' && value !== '0' && value !== undefined;
        });

        if (allFieldsFilled) {
            if (new Date(release_date) > new Date()) {
                errorMessage='Data nie może być starsza niż dzisiejsza'
                setErrorMessage(errorMessage)
            }
            else {
                const book = {
                    title,
                    author,
                    genre,
                    release_date,
                    description,
                    image_url
                };
                props.handleOnSubmit(book);
                // 替换原生DOM重置操作，直接重置React状态
                setBook(INITIAL_FORM_STATE)
            }
        } else {
            errorMessage = 'Please fill out all the fields.';
        }
        setErrorMessage(errorMessage);
    };

    const handleInputChange = (e) => {
        const name = e.target.name
        const value = e.target.value
        setBook((prev) => ({...prev, [name]: value}));

    }

    const handleOnEdit = (event) => {
        console.log(book)
        event.preventDefault()
        axios.put('http://localhost:5000/api/book/'+props.id,book)
        props.onEdit()

    }

    return (
        <div className="form">
            {errorMessage && <p className="errorMsg"><AiOutlineWarning />{errorMessage}</p>}
           <Form id="formularz"> {/* 补充id，如果你后续还有DOM操作需求可以保留，否则可以去掉 */}
                    <Form.Group controlId="nazwa">
                        <Form.Label>Wprowadź tytuł książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="title" value={title} placeholder="Tu wpisz tytuł" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="autor">
                        <Form.Label>Wprowadź autora książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="author" value={author} placeholder="Tu wpisz autora" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="genre">
                        <Form.Label>Wprowadź gatunek książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="genre" value={genre} placeholder="Tu wpisz gatunek" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="releaseDate">
                        <Form.Label>Wprowadź datę powstania książki</Form.Label>
                        <Form.Control className="control-input" type="date" name="release_date" value={release_date} placeholder="Tu wpisz datę powstania" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="description">
                        <Form.Label>Wprowadź opis książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="description" value={description} placeholder="Tu daj opis" size="30" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="imageurl">
                        <Form.Label>Wprowadź adres URL do zdjęcia książki</Form.Label>
                        {/* 把defaultValue改为value */}
                        <Form.Control className="control-input" type="text" name="image_url" value={image_url} placeholder="Tu wprowadź adres URL do zdjęcia" size="30" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="rating">
                        <Form.Label>Wprowadź ocenę książki</Form.Label>
                        {/* 把defaultValue改为value */}
                        <Form.Control className="control-input" type="number" name="rating_count" value={rating_count} placeholder="Tu wprowadź ocenę książki" size="30" onChange={handleInputChange} />
                    </Form.Group>

                    <Button type="submit" variant="primary" className="submitButton">Submit</Button>
                </Form>
        </div>
    )
}

export default BooksForm;

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