如何使用React掛鈎將文件對象設置為狀態？

Question

我想將狀態和文件對象添加到從輸入類型文件中獲取的狀態，而我的問題是我無法使用此更新狀態：

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並將其發送到后端

Answer 1

似乎您正在嘗試將“值”屬性傳遞給文件輸入。

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

在React （以及html/js ）中，文件輸入值只能由用戶設置，而不能以編程方式設置（由於安全原因）。

您應該將文件輸入與uncontrolled component

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

---

解決方案 ：從文件輸入中設置狀態值（如果確實需要），但是不要從狀態中設置輸入值。 只是找到另一種方式來表明該文件已在UI中被選中。

Answer 2

@chumakoff答案提供了一個很好的解決方案，但值得注意的是，這與反應無關。 這是瀏覽器的工作方式。

您僅添加了部分代碼，因此我假設您正在嘗試創建一個用於設置值和更改處理程序的鈎子，就像使用默認的<input type="text"/> 。

但是， <input type="file"/>工作方式有所不同-出於安全原因，只有用戶可以設置其值（即file object和file name ）。 如錯誤提示所示，您可以將此值設置為唯一的-空字符串。

請參閱有關Angular的問題 ， 該問題會產生相同的錯誤。

Answer 3

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

編輯： 評論原因

我爺爺說：“ RTFM ”

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

我不想復制粘貼文檔