Question

在使用react的应用程序中，我有一个form输入和一个radio输入，用于选择要呈现的组件，但是当我更改单选选项时，此警告就会显示-

“组件正在更改要控制的类型文件的不受控制的输入。输入元素不应从不受控制的切换到受控制的（反之亦然。决定在组件的生存期内使用受控制的或不受控制的输入元素之间”。< / h2>

表格

    import React, { useState } from "react";
    export default () => {
        const [link, setLink] = useState("");
        const [arquivo, setArquivo] = useState("");
        const [forma_envio, setFormaEnvio] = useState("");
       
       
        return(
        <React.Fragment>
            <div className="form-check ">
                <input
                    type="radio"
                    className="form-check-input"
                    name="forma"
                    id="forma1"
                    value="File"
                    checked={forma_envio === "File"}
                    onChange={(e) => {
                        setFormaEnvio(e.target.value);
                    }}
                />
            </div>
             <div className="form-check ">
                <input
                    type="radio"
                    className="form-check-input"
                    name="forma"
                    id="forma2"
                    value="Link"
                    checked={forma_envio === "Link"}
                    onChange={(e) => {
                        setFormaEnvio(e.target.value);
                    }}
                />
            </div>
            {forma_envio === "File" ? (
                <input
                    type="file"
                    className="form-control-file form-control"
                     id="arquivo"`
                    onChange={(e) => {
                        e.preventDefault();
                        handleUpload(e.target.files[0]);
                    }}
                />
            ) :forma_envio === "Link" (
                <input
                    value={link}
                    type="text"
                    className="form-control"
                    id="link"
                    onChange={(e) => {
                        e.preventDefault();
                        setLink(e.target.value);
                    }}
                />
            ):
            ("")}
        </React.Fragment>
    );
}

所有状态均以""开头。

一切正常，但我仍然不知道如何解决此警告。

Answer 1

确保link的初始值不是null或undefined，而是一个空字符串，例如：

// const [link, setLink] = React.useState() // ? will cause the warning
const [link, setLink] = React.useState('') // correct

编辑：编辑问题后，我注意到了问题：

类型为“文件” MUST BE UNCONTROLLED的

个输入标签。您不应将value或onChange传递给它。相反，您应该传递引用并将其附加到输入。

const arquivo = useRef(null);

return (
    <React.Fragment>
        // ...
        <input
            type="file"
            ref={arquivo}
            id="arquivo"
        />
    </React.Fragment>
)

这也是一种罕见的情况，您想隐藏DOM节点而不是避免呈现。 File对象直接存储在DOM上，因此必须保留此DOM节点，否则将丢失所选文件。

<input
    type="file"
    ref={arquivo}
    id="arquivo"
    style={{ display: forma_envio !== "File" && "none" }}
/>

在CodeSandbox处完成代码，没有警告。

警告：组件正在更改类型文件的受控输入

1 个答案: