Agora React-native 功能组件实现

Question

I am trying to implement agora video-call using functional component in react-native and getting the engine is not defined error. I am new to react hooks, can someone help. Below is the code for it: Declaring Engine -> let engine;

const init = async() => {
    if (Platform.OS === 'android') {
      // Request required permissions from Android
      requestCameraAndAudioPermission().then(() => {
        console.log('requested!');
      });
    }
  }

  const createEngine = async() => {
    console.log("inside engine");
    try{
      console.log("inside try");
      engine = await RtcEngine.create(appId);
      //await setEngine(e);
      console.log(engine);
      await engine.enableVideo();
    }catch(e){
      console.log(e);
    }

useEffect(() => {
    init();
  },[]);

useEffect(() => {
  createEngine();
},[createEngine]);

The engine variable becomes undefined.

Answer 1

You are using asynchronous functions, so there is always going to be a period of time where the engine is undefined before it is ready. The important thing is that your component is able to know whether or not you're got an engine and render itself accordingly.

Since engine is a variable that changes, you need to control it through a useState hook. React will re-render your component whenever the state changes, but it can't do that with let engine . I am setting the initial value to undefined but it could be null or something else. We will call setEngine when the engine is ready.

const [engine, setEngine] = useState(undefined);

When declaring dependencies for a useEffect , you want to make sure that you are not depending on functions which get re-created on each render. You can use memoization techniques such as useCallback and useMemo , but here I am just moving the createEngine function inside the useEffect in order to avoid issues. You might want to do the same with init .

export const MyComponent = ({ appId }) => {
    // engine state
    const [engine, setEngine] = useState(undefined);

    useEffect(() => {
        // variable used by cleanup function
        let isSubscribed = true;

        // create the function
        const createEngine = async () => {
            console.log("inside engine");
            try {
                console.log("inside try");
                const rtcEngine = await RtcEngine.create(appId);
                console.log(rtcEngine);
                await rtcEngine.enableVideo();
                // need to prevent calls to setEngine after the component has unmounted
                if (isSubscribed) {
                    setEngine(rtcEngine);
                }
            } catch (e) {
                console.log(e);
            }
        }

        // call the function
        createEngine();

        // return a cleanup
        return () => { isSubscribed = false; }

    },
        // will run once on component mount or if appId changes
        [setEngine, appId]
    );

    /* ... your init ... */

    return (
        <View>
            {engine // check if we have an engine and not undefined
                ?
                <SomeEngineComponent engine={engine} /> // if we know that we have an engine, we can do something with it
                :
                <SomeLoadingComponent /> // show a loading component while waiting for createEngine to finish 
            }
        </View>
    )
}