fix: call setState before callbacks (#690)

src/index.js

@@ -222,22 +222,22 @@ class Dropzone extends React.Component {
         rejectedFiles.push(...acceptedFiles.splice(0))
       }
 
-      if (onDrop) {
-        onDrop.call(this, acceptedFiles, rejectedFiles, evt)
-      }
-
-      if (rejectedFiles.length > 0 && onDropRejected) {
-        onDropRejected.call(this, rejectedFiles, evt)
-      }
-
-      if (acceptedFiles.length > 0 && onDropAccepted) {
-        onDropAccepted.call(this, acceptedFiles, evt)
-      }
-
       // Update `acceptedFiles` and `rejectedFiles` state
       // This will make children render functions receive the appropriate
       // values
-      this.setState({ acceptedFiles, rejectedFiles })
+      this.setState({ acceptedFiles, rejectedFiles }, () => {
+        if (onDrop) {
+          onDrop.call(this, acceptedFiles, rejectedFiles, evt)
+        }
+
+        if (rejectedFiles.length > 0 && onDropRejected) {
+          onDropRejected.call(this, rejectedFiles, evt)
+        }
+
+        if (acceptedFiles.length > 0 && onDropAccepted) {
+          onDropAccepted.call(this, acceptedFiles, evt)
+        }
+      })
     })
   }
 

src/index.spec.js

@@ -1292,4 +1292,19 @@ describe('Dropzone', () => {
       expect(props.onDrop).not.toHaveBeenCalled()
     })
   })
+
+  it('should not set state after onDrop callbacks', async () => {
+    const onDrop = () => {
+      jest.resetAllMocks()
+    }
+    let dropzone = mount(
+      <Dropzone accept="image/*" onDrop={onDrop}>
+        {props => <DummyChildComponent {...props} />}
+      </Dropzone>
+    )
+    const setState = jest.spyOn(dropzone.instance(), 'setState')
+    dropzone.simulate('drop', { dataTransfer: { files: images } })
+    dropzone = await flushPromises(dropzone)
+    expect(setState).not.toHaveBeenCalled()
+  })
 })