Mi aplicación React DataProvider tiene un proveedor de datos de proveedor de contexto que lee un valor de un archivo JSON y lo proporciona en Context useData() . Estoy tratando de hacer la lectura sincrónicamente para evitar tener que lidiar con un isLoading ya que este es un pequeño archivo JSON local.

¿Hay alguna forma recomendada de leer el archivo JSON de forma síncrona dentro de un proveedor de contexto?

Intenté lo siguiente usando node-sync , pero me da un error de mecanografiado

El objeto es posiblemente 'indefinido'.ts(2532)

en data en línea

 return data.find(...

Intenté cambiarlo a

 return data?.find(...`

pero ahora el error es

La propiedad 'buscar' no existe en el tipo 'nunca'.ts(2339)

 import React, { createContext, useContext, Consumer, Context, ReactNode, useMemo, } from 'react'; import Sync from 'sync'; export interface DataProviderProps { children: ReactNode; } export interface Data { secretNumber?: string; } // @ts-ignore const DataContext: Context<Data> = createContext<Data>(); export function DataProvider({ children }: DataProviderProps) { const secretNumber = useMemo(() => { // Read from JSON file const contractFile = process.env.REACT_APP_WORLD === 'main' ? '../main.json' : '../test.json'; let data; Sync(function () { data = import(contractFile); }); return data.find( // <=== TS error: Object is possibly 'undefined'. ts(2532) ({ name }: { name: string }) => name === 'elonmusk', )?.secretNumber; }, []); const states = useMemo<Data>(() => { return { secretNumber, }; }, [secretNumber]); return ( <DataContext.Provider value={states}> {children} </DataContext.Provider> ); } export function useData(): Data { return useContext(DataContext); } export const DataConsumer: Consumer<Data> = DataContext.Consumer;