Question

我正在创建图像上传组件，以允许多个图像上传。我想使用户能够连续添加图像，直到达到限制为止。文件引用以状态存储，并且状态被连续更新。在对第一个文件选择状态进行相应更新后，问题就出在第二次连续选择上，从而引发错误。

import React, { useRef, useState, useEffect } from "react";

import Button from "./Button";
import "./ImageUpload.css";

const ImageUpload = (props) => {
  const [file, setFile] = useState([]);
  const imagePickerRef = useRef();

  useEffect(() => {
    if (!file.length) {
      return;
    }
    console.log(file);
  }, [file]);

  const imagePickerHandler = () => {
    imagePickerRef.current.click();
  };

  const imagePickedHandler = (event) => {
    if (
      event.target.files &&
      event.target.files.length + file.length <= 10
    ) {
      setFile(prevFiles => [...prevFiles, ...event.target.files]);
    }
  };

  return (
    <div className="form-control">
      <input
        id={props.id}
        type="file"
        accept=".jpg, .jpeg, .png"
        style={{ display: "none" }}
        ref={imagePickerRef}
        onChange={imagePickedHandler}
        multiple
      />
      <Button type="button" onClick={imagePickerHandler}>
        PICK IMAGE
      </Button>
    </div>
  );
};

export default ImageUpload;

TypeError：无法读取null的属性“文件”

0 个答案: