React图片上传表单报错：无法设置HTMLInputElement的value属性

错误根源 #

浏览器出于安全限制，不允许通过代码为type="file"的输入框设置非空的value值，仅允许设置为空字符串。你的代码中给文件输入框绑定了value={imageUrl}，而imageUrl存储的是FileList对象或null，这直接触发了该错误。

修复步骤 #

1. 移除文件输入框的value绑定：不再通过value控制文件输入框状态，改用ref实现重置功能。
2. 使用ref清空文件输入：点击取消按钮时，通过ref将输入框的value设为空字符串（这是唯一允许的编程式修改）。
3. 修正表单校验逻辑：原代码中imageUrl === ""的判断无效，因为imageUrl存储的是文件对象或null，改为检查是否存在有效文件。
4. 调整文件存储逻辑：e.target.files是FileList集合，通常只需第一个文件，改为存储单个文件对象而非整个集合。

修正后的完整代码 #

import { useState, useEffect, useRef } from 'react';

const FormCreatePastry = () =>{
    const [ nameProduct, setNameProduct ] = useState("");
    const [ ingredient, setIngredient ] = useState("");
    const [ imageUrl, setImageUrl ] = useState(null); // 初始化为null
    const [ price, setPrice ] = useState("");
    const [ nameShopPastry, setNameShopPastry ] = useState("--Choisir une boutique--");
    const [ controlForm, setControlForm ] = useState(false);
    const fileInputRef = useRef(null); // 创建ref引用文件输入框

    const handleChange = (e) =>{
        const nameShop = e.target.value;
        setNameShopPastry(nameShop);
    }

    const sendForm = (e) =>{
        e.preventDefault();
        createPastryService(nameProduct, ingredient, imageUrl, nameShopPastry, price)
    }

    const uploadImage = (e) =>{
        const file = e.target.files[0]; // 取第一个选中的文件
        setImageUrl(file);
    }

    const cancelForm = (e) =>{
        e.preventDefault();
    }

    const cancelImage = (e) =>{
        e.preventDefault();
        setImageUrl(null);
        // 通过ref清空文件输入框
        if (fileInputRef.current) {
            fileInputRef.current.value = "";
        }
    }

    const ErrorForm = () =>{
        if (controlForm === true) {
            return(
                <>
                    <p>Veuillez remplir tous les champs!</p>
                </>
            )
        }else{
            return null
        }
    }
    
    useEffect(()=>{
        console.log(imageUrl)  
        console.log(nameShopPastry)
        // 修正校验条件：检查imageUrl是否存在
        if (nameProduct.length < 1 || ingredient.length < 1 || nameShopPastry === "--Choisir une boutique--" || price === "" || !imageUrl ) {
            setControlForm(true)
        }else{
            setControlForm(false)
        }
    },[controlForm,nameShopPastry, ingredient, imageUrl, nameProduct, price])
    
    return(
        <form action="">
            <label htmlFor="Nom du produit:">
                Nom du produit:
                <input type="text" value={nameProduct} onChange={(e)=>setNameProduct(e.target.value)} />
            </label>
            <label htmlFor="Ingrédients">
                Ingrédients:
                <input type="text" value={ingredient} onChange={(e)=>setIngredient(e.target.value)}/>
            </label>
            <label htmlFor="">
                Prix:
                <input type="text" value={price} onChange={(e)=>setPrice(e.target.value)} />
            </label>
            <label htmlFor="Image du produit">
                Image du produit:
                {/* 移除value绑定，添加ref */}
                <input type="file" ref={fileInputRef} onChange={uploadImage}/>
                <button onClick={cancelImage}>X</button>
            </label>
            <div>
                <p>Sélectionner une boutique</p>
                <select onChange={(e)=> handleChange(e)}>
                    <option value="--Choisir une boutique--">--Choisir une boutique--</option>
                    <option value="20">Pastry Paris </option>
                    <option value="23">Pastry Bordeaux</option>
                </select>
            </div>
            <div>
                <button disabled={controlForm} onClick={sendForm}>valider</button>
                <button onClick={cancelForm}>annuler</button>
            </div>
            <ErrorForm />
        </form>
    )
}

export default FormCreatePastry;

关于"别人相同写法正常"的说明 #

如果其他人的代码看似相同却未报错，大概率是他们没有给文件输入框绑定非空的value值，或者仅在需要清空时设置value=""，而非绑定文件对象或null。

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