如何使用 React 钩子将文件对象设置为状态？答案

【问题标题】：How to set file object in state with React hooks?如何使用 React 钩子将文件对象设置为状态？
【发布时间】：2019-12-27 17:36:47
【问题描述】：

我想添加到我从输入类型文件中获取的状态和文件对象，我的问题是我不能用这个更新状态：

currentTarget.files[0]

我收到此错误：

DOMException: 无法在 'HTMLInputElement' 上设置 'value' 属性：此输入元素接受一个文件名，该文件名只能以编程方式设置为空字符串。

const [data, changeData] = useState({
  name: '',
  surname: '',
  cv: '',
});

HandleChangeEvent 获取数据

const handleChangeData = ({ currentTarget }, key) => {
    if (currentTarget.type === 'file') {
      const files = currentTarget.files[0];
      changeData((prevState) => {
        console.log(prevState);
        return { ...prevState, [key]: files };
      });
    } else {
      // Validate property
      const val = currentTarget.value;
      const errorMessage = validateProperty(currentTarget);
      if (errorMessage) errors[currentTarget.name] = errorMessage;
      else delete errors[currentTarget.name];

      changeData((prevState) => {
        return { ...prevState, [key]: val };
      });
    }
  };

我想从输入字段中获取属性files 并将其发送到后端

【问题讨论】：

尝试使用 event.target.files[0] 而不是 currentTarget
我在尝试，得到同样的错误

标签： javascript html reactjs input react-hooks

【解决方案1】：

changeData(
    { 
        ...data, 
        [key]: val 
    }
);

编辑： 评论原因

正如我爷爷所说：“RTFM”

https://reactjs.org/docs/hooks-state.html

我不想复制粘贴文档

【讨论】：

一个好的答案应该提供解释而不是一段代码。尝试解释是什么导致您编写此代码以及它将如何帮助解决问题。

【解决方案2】：

您似乎正在尝试将“值”道具传递给文件输入。

<input type="file" value="???" />

在React（以及html/js）文件输入值只能由用户设置，不能以编程方式设置（出于安全原因）。

您应该像使用 uncontrolled component 一样使用文件输入

https://reactjs.org/docs/uncontrolled-components.html#the-file-input-tag

解决方案：从文件输入中设置状态值（如果你真的需要的话），但不要从状态中设置输入值。只需找到另一种方式来显示该文件已在 UI 中被选中。

【讨论】：

【解决方案3】：

@chumakoff 回答提供了一个很好的解决方案，但值得注意的是，这与反应无关。这就是浏览器的工作原理。

您只添加了部分代码，因此我假设您正在尝试创建一个用于设置值和更改处理程序的挂钩，就像您将使用默认的 <input type="text"/> 一样。

但是，<input type="file"/> 的工作方式不同 - 出于安全原因，只有用户可以设置它的值（即 文件对象 和 文件名）。正如错误提示的那样，您唯一可以将此值设置为 - 一个空字符串。

请参阅this question about Angular，它会产生相同的错误。

【讨论】：