尝试更新状态变量 onChange 时出现“InvalidStateError：尝试使用不可用或不再可用的对象”答案

【问题标题】：Getting "InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable" when trying to update state variable onChange尝试更新状态变量 onChange 时出现“InvalidStateError：尝试使用不可用或不再可用的对象”
【发布时间】：2022-08-18 02:18:46
【问题描述】：

美好的一天，我似乎无法弄清楚这一点。我得到\“InvalidStateError：试图使用一个不可用或不再可用的对象”让我解释一下：

我有一个 CustomUpload 组件：

export const CustomUpload = ({ name, children, accept, onChange, value }) => {
  const fileUpload = useRef(null);

  const handleClick = (e) => {
    e.preventDefault();
    fileUpload.current.click();
  };

  return (
    <div className=\"custom-upload-container\">
      <label
        style={{ textAlign: \"center\", fontFamily: \"var(--montserrat-text)\" }}
        htmlFor={name}
      >
        {children}
      </label>
      <div className=\"custom-upload-input-container\">
        <p>{value.name}</p>
        <div className=\"input-container\">
          <input
            ref={fileUpload}
            className=\"custom-upload\"
            type=\"file\"
            name={name}
            accept={accept}
            onChange={onChange}
            value={value}
          />
        </div>

        <CustomButton onClick={handleClick}>Browse</CustomButton>
      </div>
    </div>
  );
};

然后我有一个页面，用户必须提交 5 张图片，但为简单起见，我将使用两张：

export const Images = () => {
const [data, setData] = useState({
    image1: \"\",
    image2: \"\",
  });
const { image1, image2 } = data;

const handleOnChange = (value, fieldName) => {
setData({...data, [fieldName]: value });

return(
<form>
        <CustomUpload
          name=\"image1\"
          onChange={(e) => handleOnChange(e.target.files[0], \"image1\")}
          value={image1}
          accept=\"image/*\"
        >
          First Image
        </CustomUpload>
        <CustomUpload
          name=\"image2\"
          onChange={(e) => handleOnChange(e.target.files[0], \"image2\")}
          value={image2}
          accept=\"image/*\"
        >
          Second Image
        </CustomUpload>
</form>

}

问题是，当我选择图像时，它给了我错误，我似乎无法弄清楚我应该如何解决它。谢谢你。

标签： reactjs onchange use-state

【解决方案1】：

我想到了。所以问题是我使用 value 属性分配了 CustomUpload 的值，这对于文本输入是正常的，但似乎破坏了文件输入。

<CustomUpload
          name="image1"
          onChange={(e) => handleOnChange(e.target.files[0], "image1")}
      >>> value={image1} //remove this line.
          accept="image/*"
        >
          First Image
</CustomUpload>

应该：

<CustomUpload
          name="image1"
          onChange={(e) => handleOnChange(e.target.files[0], "image1")}
          accept="image/*"
        >
          First Image
</CustomUpload>

顺便说一句，对于处理多个文件上传并拥有一个 onChangeHandler 和 useState 挂钩，这是一个非常巧妙的解决方案。希望这可以帮助人们：D

【讨论】：

但是，当您重置表单时，该值根本不会改变，输入将继续显示相同的文件。

【解决方案2】：

我爱你你拯救了我的大学项目

【讨论】：