reactjs - 为什么 Flow 将我的 React 组件报告为 `incompatible with string` ？

Question

我有一个输入组件，我将它包含在更大的表单组件中，而 Flow 抛出以下错误。

Cannot instantiate React.Element because class UploaderInput [1] is incompatible with string [2] in type argument
ElementType.

     src/components/provider/signout/SignoutNoteForm.jsx
     108│               />
     109│             </div>
     110│             <div>
     111│               <UploaderInput
     112│                 dropInstructions="Drop files to attach to this signout or click to browse"
     113│                 error={errors}
     114│                 files={values.files}
     115│                 name="files"
     116│                 onChange={value => setFieldValue(`files`, value)}
     117│                 onUploadingStart={startUploading}
     118│                 onUploadingComplete={stopUploading}
     119│                 s3Url={s3Url}
     120│                 title="Upload Files"
     121│                 touched={touched}
     122│                 uploadOptions={uploadOptions}
     123│               />
     124│               <ErrorMessage message={touched.files && errors.files ? errors.files : ''} />
     125│             </div>
     126│             <div>

     /private/tmp/flow/flowlib_1e7d8b2/react.js
 [2] 170│   | string

     src/components/form/UploaderInput.jsx
 [1]  98│ export default class UploaderInput extends Component<Props, State> {

这不是我唯一的输入组件，我对其他任何组件都没有问题。
这个相当不透明的消息是什么意思，有哪些解决方法？

Answer 1

原来，这是我的 Props 之间的不匹配和我的 defaultProps在 UploaderInput类型。

这个命令:

flow check --show-all-branches

使其更加清晰，并且是 future 调试的一个很好的提示。

Cannot instantiate React.Element because in type argument ElementType:
 • Either class UploaderInput [1] is incompatible with string [2].
 • Or null [3] is incompatible with string [4].

     components/provider/signout/SignoutNoteForm.jsx
     108│               />
     109│             </div>
     110│             <div>
     111│               <UploaderInput
     112│                 dropInstructions="Drop files to attach to this signout or click to browse"
     113│                 error={errors}
     114│                 files={values.files}
     115│                 name="files"
     116│                 onChange={value => setFieldValue(`files`, value)}
     117│                 onUploadingStart={startUploading}
     118│                 onUploadingComplete={stopUploading}
     119│                 s3Url={s3Url}
     120│                 title="Upload Files"
     121│                 touched={touched}
     122│                 uploadOptions={uploadOptions}
     123│               />
     124│               <ErrorMessage message={touched.files && errors.files ? errors.files : ''} />
     125│             </div>
     126│             <div>

     /private/tmp/flow/flowlib_2ba42473/react.js
 [2] 170│   | string

     components/form/UploaderInput.jsx
 [4]  81│   title: string,
        :
 [1]  98│ export default class UploaderInput extends Component<Props, State> {
        :
 [3] 107│     title: null,