Javascript 在组件重新渲染时，输入值无效的文件

我在React组件中使用类型为file的受控输入。若我在输入组件中选择了一个文件，并切换主组件的显示/隐藏行为。组件上的重新渲染输入不工作，并引发以下错误：

Uncaught DOMException:未能设置“HTMLInputElement”的“value”属性：此输入元素接受文件名，该文件名只能通过编程设置为空字符串。

const [filePath, setPath] = useState('');
<input
    key={"a"}
    id={"1"}
    name={"file input"}
    type="file"
    value={filePath}
    multiple
    onChange={(event) =>
      setPath(event.target.value)
    }
  />

const[filePath，setPath]=useState（“”）；
setPath（event.target.value）
}
/>

获取文件名时引用了错误的内容

您应该使用

event.target.files[0]

试用

onChange={(event) => setPath(event.target.files[0].name)}

如果将默认值设置为空字符串，则状态变量

const[filePath，setPath]=useState（“”）

那么这也应该管用

value={filePath}

您也可能需要考虑使用<代码> Debug值 PROP< /P> < P>您的语法问题
改变

value={filePath | ''}

到

你能包括导致错误的代码吗？
value={filePath || ''}