Estoy usando swr en un proyecto de reacción y estoy tratando de generar los mensajes de carga/error en un componente principal que envuelve los datos de carga de los componentes.
El componente de envoltura es un componente muy simple que devuelve diferentes mensajes según el estado de carga.
const LoadingView = ({ loading, error, children }) => { if (error) { return <span>Error</span> } if (loading) { return <span>Loading...</span> } return <Container>{children}</Container> }Y el componente hijo:
const WipePeriodTeams = ({ wipePeriodId }) => { const params = useParams() const { data, error } = useSWR( `/some-endpoint` ) return <LoadingView loading={!data}>{console.log(data.length)}</LoadingView> <--- ReferenceError }El problema es que el método de procesamiento del componente secundario siempre se evalúa, no importa si la carga es verdadera o falsa, lo que podría terminar en un error de referencia debido a que los datos no se cargaron.
¿El valor de retorno siempre se evalúa sin importar lo que devuelva el padre? ¿Hay alguna forma de evitar esto?
¡Gracias! :)
Ese es el comportamiento correcto: la evaluación de los niños se produce en el componente principal. Está viendo un error porque data no están definidos, por lo que data.length está tratando de señalar una propiedad de algo que no existe.
Una forma de evitar el error es usar el separador && para verificar si existen data antes de referirse a su longitud:
<LoadingView loading={!data}>{data && console.log(data.length)}</LoadingView> Otro enfoque es reemplazar su expresión JSX con un componente. Entiendo que su ejemplo tiene un elemento secundario artificial console.log() , pero en el mundo real es probable que pase otro(s) componente(s). Los componentes son funciones, por lo que no se evalúan a nivel principal:
const ChildComponent = ({data}) => { return (<>{console.log(data.length)}</>) } const Parent = () => { const { data, error } = useSWR( `/some-endpoint` ); return ( <LoadingView loading={!data}> <ChildComponent data={data} /> </LoadingView> ); }Hay algunos otros enfoques para retrasar la evaluación de los niños si investiga en línea, pero tenga cuidado ya que algunos de ellos se sienten como soluciones complicadas.