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

我想添加到从输入类型文件获取的状态和文件对象，我的问题是我无法使用以下内容更新状态：

currentTarget.files[0]

我得到了这个错误：

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

用于获取数据的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 };
      });
    }
  };

我想从输入字段获取属性

文件

，并将其发送到后端

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

编辑：评论原因

就像我爷爷说的：“RTFM”

我不想复制粘贴文档

编辑：评论原因

就像我爷爷说的：“RTFM”

---

我不想复制粘贴文档

看起来您正试图将“值”道具传递给文件输入

在

React

（以及

html/js

）中，文件输入值只能由用户设置，不能以编程方式设置（由于安全原因）

您应该像处理

非受控组件一样处理文件输入



解决方案：从文件输入设置状态值（如果确实需要），但不要从状态设置输入值。只需找到另一种方式来显示该文件已在UI中被选中。
看起来您正在尝试向文件输入传递“值”属性


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

您应该像处理
非受控组件一样处理文件输入



解决方案：从文件输入设置状态值（如果确实需要），但不要从状态设置输入值。只需找到另一种方式来显示该文件已在UI中被选中。
@chumakoff answer提供了一个很好的解决方案，但值得注意的是，这与react无关。这就是浏览器的工作方式

您只添加了部分代码，因此我假设您正在尝试创建一个用于设置值和更改处理程序的钩子，就像使用默认的
一样

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

请参阅，这会产生相同的错误。
@chumakoff答案提供了一个很好的解决方案，但值得注意的是，这与react无关。这就是浏览器的工作方式

您只添加了部分代码，因此我假设您正在尝试创建一个用于设置值和更改处理程序的钩子，就像使用默认的
一样

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

请参阅，这会产生相同的错误。
尝试使用event.target.files[0]而不是currentTargetI尝试，获取相同的错误尝试使用event.target.files[0]而不是currentTargetI尝试，获取相同的错误一个好的答案应该提供一个解释，而不是一段代码。试着解释是什么导致你写这段代码，以及它将如何帮助你面对这个问题。一个好的答案应该提供一个解释，而不是一段代码。试着解释是什么导致你写这段代码，以及它将如何帮助你面对这个问题。
changeData(
    { 
        ...data, 
        [key]: val 
    }
);