유형 오류: JSX 요소 유형 '{} | null | defined'는 JSX 요소에 대한 생성자 함수가 아닙니다.

유형 오류: JSX 요소 유형 '{} | null | defined'는 JSX 요소에 대한 생성자 함수가 아닙니다.

리액트라는 구성 요소가 있습니다.HandleQueryApollo GraphQL 쿼리의 결과를 처리합니다.

import React, { ReactNode } from 'react';

import { CenteredMessage } from './centered-message';

export interface HandleQueryProps {
    loading: boolean,
    error?: Error,
    children: ReactNode
}

export const HandleQuery = ({ loading, error, children }: HandleQueryProps) => {
    if (loading) {
        return <CenteredMessage>Loading...</CenteredMessage>;
    }

    if (error) {
        return <CenteredMessage>{error.message}</CenteredMessage>;
    }

    return children;
};

이 구성 요소가 다른 구성 요소에서 사용되는 경우 컴파일되지 않습니다.

import React from 'react';

import { useQuery } from 'react-apollo-hooks';
import gql from 'graphql-tag';
import { HandleQuery } from '..';
import { MutationType } from '../../graphql-types';
import { AuthorsPanel } from './authors-panel';
import { GET_AUTHORS } from './authors-queries';
import { AuthorMutated } from './__generated__/AuthorMutated';

export class AuthorsContainer extends React.Component {
    render() {
        const { loading, error, data } = useQuery(GET_AUTHORS);
        return (
            <!-- THIS LINE PRODUCES A COMPILER ERROR -->
            <HandleQuery loading={loading} error={error}>
                <AuthorsPanel data={data} />
            </HandleQuery>
        );
    }
}

의 사용HandleQuery위에서는 다음과 같은 오류가 발생합니다.

형식 오류: JSX 요소 유형 '{} | null | defined'는 JSX 요소에 대한 생성자 함수가 아닙니다.'undefined' 유형은 'Element | null' 유형에 할당할 수 없습니다.TS2605

이것은 무엇을 의미하며 어떻게 없앨 수 있습니까?

갱신하다

AuthorsContainer를 함수 구성 요소로 변환해도 다음 오류가 제거되지 않습니다.

export const AuthorsContainer = () => {
    const { loading, error, data } = useQuery(GET_AUTHORS);
    return (
        <HandleQuery loading={loading} error={error}>
            <AuthorsPanel data={data} />
        </HandleQuery>
    );
};

업데이트 2 @FredyC의 구현된 제안:

import React from 'react';

import { CenteredMessage } from './centered-message';

export interface HandleQueryProps {
    loading: boolean;
    error?: Error;
}

export const HandleQuery: React.FC<HandleQueryProps> = ({
    loading,
    error,
    children
}) => {
    if (loading) {
        return <CenteredMessage>Loading...</CenteredMessage>;
    }

    if (error) {
        return <CenteredMessage>{error.message}</CenteredMessage>;
    }

    return children;
};

이제 컨테이너 구성 요소의 오류는 사라졌지만 새로운 컴파일러 오류가 발생했습니다.HandleQuery구성 요소:

Type error: Type '({ loading, error, children }: PropsWithChildren<HandleQueryProps>) => {} | null | undefined' is not assignable to type 'FunctionComponent<HandleQueryProps>'.
  Type '{} | null | undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.
    Type 'undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.  TS2322

ReactNode와 관련하여 장기적인 문제가 있습니다.구체적인 내용은 이해가 가지 않지만, TypeScript 자체로 유선 연결되어 있고 작업 중입니다.

어느 쪽이든 해결책은 쉬울 것입니다.기능적 구성 요소와 함께 ReactNode를 사용하지 마십시오. :)childrenprop가 React에 암시적으로 포함되어 있습니다.FC 유형.

돌아오는 아이들에게도 같은 문제가 발생합니다.로 감싸면 극복할 수 있습니다.<React.Fragment>또는<div>만약 당신이 원한다면, 하지만 그것은 단지 유형 오류이기 때문에, 당신은 당신이 무엇을 하고 있는지 알고 있다고 TypeScript를 설득할 수 있습니다 :)

import React, { ReactNode } from 'react';

import { CenteredMessage } from './centered-message';

export interface HandleQueryProps {
    loading: boolean,
    error?: Error,
}

export const HandleQuery: React.FC<HandleQueryProps> = ({ loading, error, children }) => {
    if (loading) {
        return <CenteredMessage>Loading...</CenteredMessage>;
    }

    if (error) {
        return <CenteredMessage>{error.message}</CenteredMessage>;
    }

    return children as ReactElement<any>;
};

이 경우 보다 쉽게 정의할 수 있습니다.children유형의ReactElement내가 무언가를 회피하지 않는다면 말입니다.

export interface HandleQueryProps {
    loading: boolean,
    error?: ApolloError,
    children: ReactElement
}

전환ReactNode로.JSX.Element유형 문제를 해결합니다.

React의 관련 github 이슈에 따르면, 다음과 같이 사용합니다.JSX.Element대신에ReactNode는 기능 구성 요소에 대해 권장됩니다.

의 세부 정보를 확인할 수 있습니다.JSX.Element대ReactNode원고-치트 시트/카이트 시트/카이트 페이지.

이 사건에 대한 나의 해결책은 Typescript Generics와 함께 작동합니다.

Wrapper.ts 쿼리

import { QueryResult } from "@apollo/client/react/types/types";

interface Props<TData, TVariables> {
  query: QueryResult<TData, TVariables>;
  children: (data: TData) => any;
}

export function QueryWrapper<TData, TVariables>({ query, children }: Props<TData, TVariables>) {
  if (query.loading) {
    return "loading...";
  }

  if (query.error) {
    return query.error.message;
  }

  if (!query.data) {
    return "Data is empty"
  }

  return children(query.data as TData);
}

용도:

const recipeQuery = useQuery<{ recipes: Recipe[] }>(GET_RECIPES);

<QueryWrapper query={recipeQuery}>
    {({recipes}) => (
       JSON.stringify(recipes)
    )}
</QueryWrapper>

나에게 이 명령은 문제를 해결했습니다.

rm -rf node_modules && rm yarn.lock && yarn

언급URL : https://stackoverflow.com/questions/54905376/type-error-jsx-element-type-null-undefined-is-not-a-constructor-functi