En mi aplicación Expo TypeScript, tengo una función en un componente raíz:
const getCardType = (type = ECardType.WOOD) => { setCardType(type); };y pasarlo en mi primer componente hijo:
<Slider data={slideData} autoPlay={false} getCardType={getCardType} />Aquí está mi primer componente secundario donde paso la función y escribe la declaración:
readonly getCardType?: (type: ECardType) => void; const Slider: React.FunctionComponent<ISliderProps> = ({ data, autoPlay, getCardType, })Después de eso, lo paso a un segundo componente secundario:
<SliderCardItem cardItem={item} index={index} getCardType={getCardType} />Y en este componente SliderItem , uso esta función:
useEffect(() => { getCardType(cardType); }, [cardType]);Pero tiene un error de TS: no se puede invocar un objeto que posiblemente esté 'indefinido' en el componente secundario
Configuré el tipo de tarjeta a continuación en un onPress ()
Tengo este error solo en este componente.
¿Alguna idea para corregir este error?
getCardType podría no estar definido, como se indica en su tipo aquí:
getCardType?: (type: ECardType) => void;
Entonces estás tratando de llamarlo sin verificar si existe:
useEffect(() => { getCardType(cardType); }, [cardType]);Por lo tanto, deberá realizar esa verificación:
useEffect(() => { if (getCardType) getCardType(cardType); }, [cardType]);o con encadenamiento opcional:
useEffect(() => { getCardType?.(cardType); }, [cardType]);Si siempre estará presente, puede hacer que no sea opcional en su tipo:
getCardType: (type: ECardType) => void;
Quitar el ? en la declaración de tipo, si es necesario. Si no es obligatorio, primero debe verificar si existe.
Otro punto, getCardType es en realidad una dependencia de ese efecto también, pero al mirarlo es seguro ignorarlo (porque solo envuelve una llamada setState).
Sin embargo, no me gusta ignorar cosas. Entonces, si yo fuera tú, probablemente lo escribiría así:
// useCallback makes getCardType referentially identical between renders const getCardType = useCallback((type = ECardType.WOOD) => { setCardType(type); // safe to ignore setCardType in the dependencies because it's a dispatcher },[]); // ... and in the child: useEffect(() => { getCardType(cardType); }, [ getCardType, cardType ]); Sinceramente, me muero por saber de qué se trata ese useEffect de uso en el niño, porque huele un poco a pescado.