类型'Promise <Element>'缺少类型'ReactElement <any,any>的以下属性

时间:2020-08-16 13:48:06

标签: reactjs typescript promise es6-promise

当尝试渲染ClientDetails组件在props中传递客户端列表时,我遇到了编译问题:

我收到此错误消息:

Type '{ (): Promise<JSX.Element>; propTypes: {}; }' is not assignable to type 'ComponentClass<any, any> | FunctionComponent<any> | ComponentClass<RouteComponentProps<any, StaticContext, {}>, any> | FunctionComponent<...>'.
      Type '{ (): Promise<JSX.Element>; propTypes: {}; }' is not assignable to type 'FunctionComponent<any>'.
        Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key

我的renderClientsTable函数:

static async renderClientsTable(clients: Readonly<IClientModel[]>) {
        return (
            <table className='table table-striped' aria-labelledby="tabelLabel">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Url</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    { await Promise.all(clients.map(async (cl): Promise<void> => {
                           ( 
                                <>
                                    <ClientDetails id={cl.id} name={cl.name} baseUrl={cl.baseUrl} status={cl.status} /> 
                                </>
                            )
                        }))
                    }
                </tbody>
            </table>
        );
    }

这是我父组件的代码:

 const ClientsPage = async () => { 
        return (
            <div>
                <Clientslist clients = { this.loadClients() } >
                    {Children}
                </Clientslist>
            </div>
        );
    
        async function loadClients(): Promise<IClientModel[]> {
            const response = await fetch('clients/all', {
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            });
            return await response.json();
        }
    };
    
    ...
    
    export default ClientsPage;

0 个答案:

没有答案