Agora React-native 功能组件实现

Question

我正在尝试使用 react-native 中的功能组件实现 agora 视频通话，并得到引擎未定义错误。 我是反应钩子的新手，有人可以帮忙。 下面是它的代码：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

您正在使用异步函数，因此在引擎准备好之前总会有一段时间undefined engine 。 重要的是您的组件能够知道您是否拥有engine并相应地呈现自己。

由于engine是一个变化的变量，你需要通过一个useState钩子来控制它。 每当 state 更改时，React 都会重新渲染您的组件，但它不能用let engine做到这一点。 我将初始值设置为undefined ，但它可能是null或其他东西。 当引擎准备好时，我们将调用setEngine 。

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

在为useEffect声明依赖项时，您要确保不依赖在每次渲染时重新创建的函数。 您可以使用诸如useCallback和useMemo类的记忆技术，但这里我只是将createEngine function 移动到useEffect中以避免出现问题。 您可能想对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>
    )
}