Почему Flow сообщает, что мой компонент React несовместим со строкой?

У меня есть компонент ввода, который я включаю в компонент более крупной формы, и 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> {

Это не единственный мой входной компонент, и у меня нет проблем ни с одним из остальных. Что означает это довольно непрозрачное сообщение и как можно с ним справиться?

reactjs flowtype

06.01.2019 19:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

2 141

Ответы 1

Оказывается, это было несоответствие между моим Props и моим defaultProps в типе UploaderInput.

Эта команда:

flow check --show-all-branches

сделал это намного понятнее и является хорошим советом для будущей отладки.

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,

06.01.2019 19:51

Другие вопросы по теме

Как правильно создать тип с константами с помощью Flow в Javascript?

Сервер потока запущен, но vscode-flow-ide не отображает ошибки на vscode

Невозможно отключить eslint no-unused-выражений

Как получить типы объединения из массива в потоке?

Как реализовать множественное наследование при использовании Flow

Как в React with flowtype набирать только одни реквизиты и разрешать любые другие?

Невозможно установить Flow for React в проекте Laravel

Flow JS - Как использовать универсальные шаблоны в объекте как карте с классом

React Flow как определить интерфейс для метода статического класса?

Как ограничить тип, основанный на другом типе, с помощью потока?

Почему Flow сообщает, что мой компонент React несовместим со строкой?

Ответы 1

Другие вопросы по теме

Похожие вопросы