0
function MyFunction() {
    const [service, setService] = useState(); 

    useEffect(() => {
        const service = new ApiService();
        //service.getData().then((res) => console.log(res)); // works!
    
        setService(service);
        loadData();
    }, [])


    async function loadData() {
        const result = await service.getData(); // service is undefined!
        console.log(result);
    }
}

Why service is undefined? Can I use a Class Component instance inside a Functional Component?

Mikhail
  • 91
  • 6
  • 1
    Please explain what are you trying to do, invoking Class Component constructor has no useful meaning, I guess you trying to call a static helper function? Please show how your API service defined, why its a Class Component and no a util class? – Dennis Vash Jul 26 '21 at 13:50
  • undefined means service hasn't been assigned a value. You can use instances of classes inside functional components – Mr. Robot Jul 26 '21 at 13:50
  • It's undefined because `setService` is async. – jmargolisvt Jul 26 '21 at 13:53
  • 1
    At the time you are calling `loadData`, the `service` state is still undefined because `setService` is async. You would need to use `useEffect` for instance, to detect a change in the state's value before calling loadData. See this https://stackoverflow.com/questions/54119678/is-usestate-synchronous – Micah Jul 26 '21 at 13:55

0 Answers0