当尝试渲染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;