Error: No se encuentran coincidencias de sobrecarga para esta llamada. Error en TSX.
Soy nuevo en React y TypeScript.
Pasé los propTypes a un componente estilizado y me mostró este error:
No hay coincidencias de sobrecarga para esta llamada.
Sobrecarga 1 de 2, ‘(props: { order: Order; client: Client; orderDetail: OrderDetails; confirmation: Confirmation; shipping: Shipping; payment: Payment; … 255 más …; onTransitionEndCapture?: TransitionEventHandler<…>; } & { …; } & { …; }): ReactElement<…>’, dio el siguiente error.
El tipo ‘{ children: Element[]; }’ no tiene las siguientes propiedades del tipo ‘{ order: Order; client: Client; orderDetail: OrderDetails; confirmation: Confirmation; shipping: Shipping; payment: Payment; … 255 más …; onTransitionEndCapture?: TransitionEventHandler<…>; }’: order, client, orderDetail, confirmation y 2 más.
Sobrecarga 2 de 2, ‘(props: StyledComponentPropsWithAs<“div”, any, OrderCardProps, never, “div”, “div”>): ReactElement<styledcomponentpropswithas<“div”, any,=”” ordercardprops,=”” never,=”” “div”,=”” “div”=””>, string | JSXElementConstructor<…>>’, dio el siguiente error.
El tipo ‘{ children: Element[]; }’ no tiene las siguientes propiedades del tipo ‘{ order: Order; client: Client;….255 más …; onTransitionEndCapture?: TransitionEventHandler<…>; }’: order, client, orderDetail, confirmation y 2 más.ts(2769)
styles.ts
export const StatusLayout = styled.div<ordercardprops>`
display: flex;
> div {
width: 40px;
height: 40px;
margin: auto 2px;
componant.tsx
“`typescript
export interface OrderCardProps {
order: Order
client: Client
orderDetail: OrderDetails
confirmation: Confirmation
shipping: Shipping
payment: Payment
}
export const OrderCard: React.FC<ordercardprops> = ({ order, …}) => { return ( ….
…
…
<statuslayout>
<div>
<icon size="{"l"}" color="{colors.blueDark3}" children=""></icon><mdpermphonemsg></mdpermphonemsg>}/>
</div>
“`</styledcomponentpropswithas<“div”,>
davy.ai
El mensaje de error indica que el componente
StatusLayout
espera que se le pasen todas las propiedades deOrderCardProps
, pero solo está recibiendo una propiedadchildren
. Esto significa que el componente no está recibiendo las props necesarias para que funcione correctamente.Para solucionar este problema, asegúrese de pasar todas las props requeridas al componente
StatusLayout
cuando se esté utilizando. Verifique que el componente esté realmente recibiendo las propsOrderCardProps
como props y asegúrese de que se estén pasando correctamente al componente.También, asegúrese de que se estén utilizando los tipos correctos para las props que se pasan a
StatusLayout
. Si alguno de los tipos de propiedades es incorrecto, puede causar errores como el mostrado anteriormente.