使用 React DropZone 但回调不更新

如何解决使用 React DropZone 但回调不更新

我正在尝试使用 React Dropzone，但是当状态更新时回调不会被触发或更新。我什至尝试添加一个单独的 useCallback。非常感谢任何帮助

代码沙盒链接 https://codesandbox.io/s/thirsty-mountain-ydsc7?file=/src/App.js

父组件（类）

  <UploadWithDropZone handleCallback={(files) => this.handleImageCallback(files)}/>

  handleImageCallback = (files) => {
    console.log('files ',files);
    if(!files) return;
    this.setState({addedImages: files});
 }

子组件（钩子）

const UploadWithDropZone = ({handleCallback}) => {

const [files,setFiles] = useState([]);

const onDrop = useCallback(async acceptedFiles  => {
    console.log('firing ');
    handleCallback(acceptedFiles);
    setFiles(acceptedFiles.map(file => Object.assign(file,{
        preview: URL.createObjectURL(file)
    })));
},[files])


const {getRootProps,getInputProps} = useDropzone({
    accept: MIME_TYPES_ACCEPT,onDrop,});

const removeFile = (file) => {
    const newFiles = [...files];
    newFiles.splice(file,1);
    setFiles(newFiles);
}

const thumbs = files.map((file,i) => (
    <div style={thumb} key={file.name}>
        <div style={thumbInner}>
            <DeleteIcon onClick={() => removeFile(i)}/>
            <object data={file.preview ? file.preview : docs} type="image/png">
                <img
                    src={file.preview}
                    style={img}
                />
            </object>
        </div>
    </div>
));

useEffect(() => () => {
    // Make sure to revoke the data uris to avoid memory leaks
    files.forEach(file => URL.revokeObjectURL(file.preview));
},[files]);


return (
    <section className="container">
        <div {...getRootProps({className: 'dropzone'})}>
            <input {...getInputProps()} />
            <p>Drag 'n' drop some files here,or click to select files</p>
        </div>
        <aside style={thumbsContainer}>
            {thumbs}
        </aside>
    </section>
 );

}

export default UploadWithDropZone;

非常感谢任何帮助