Así que tengo un objeto en mecanografiado usado en componentes de reacción que tiene este tipo:
export type DataInfoTypes<dataType> = { data: dataType | null; loading: boolean; error: boolean; };Supongamos que habría "tipo de datos" (no debería importar, solo un objeto de cadenas):
{[key in string]: string}Luego, cuando uso estos datos en el componente React, verifico si object.data no es nulo:
if (!materials.data || materials.loading) { return <DataLoading />; }Luego, en mi función de devolución, cuando hago referencia a los datos, parece estar bien:
<Flex alignItems="center" direction="column"> <Text>{materials.data["somekey"]}</Text> <VStack w="100%" ....Sin embargo, pocas líneas hacia abajo tengo un método de mapa de matriz (en el mismo componente, mismo retorno):
<VStack w="100%" align="center"> {sources.map((matKey: string, index: number) => { return <Text key={index}>{materials.data["somekey"]}</Text> } </VStack>Y me sale este error:
El objeto es posiblemente 'nulo'. TS2531
¿Alguna idea sobre cómo solucionar esto o cuál es la causa? (Excluya todas las soluciones tsignore si es posible)
Muchas gracias a todos los que respondieron.
El tipo de data declarado es dataType o null . Lo que el compilador ts le dice es que está tratando de acceder a una propiedad ( .someKey ) de un valor posiblemente null , lo que dará como resultado un error de tiempo de ejecución.
Para solucionarlo, utilice el encadenamiento opcional :
materials.data?.somekey que devolverá el valor de data.somekey cuando data no son null e undefined cuando data son null .
Lo que es más importante, el encadenamiento opcional no arroja un error de tiempo de ejecución cuando data son falsos.