Agora React-本机功能组件实现
Agora React-本机功能组件实现
提问于 2021-02-23 00:02:42
我正在尝试使用react-native中的函数组件来实现agora视频通话，但得到的引擎没有定义错误。我刚接触react hooks，有人能帮我吗？下面是它的代码:声明引擎-> let引擎；
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.回答 1
Stack Overflow用户
发布于 2021-02-23 09:21:06
您使用的是异步函数，因此在engine准备就绪之前总会有一段时间处于undefined状态。重要的是，您的组件能够知道您是否获得了engine并相应地呈现自身。
因为engine是一个不断变化的变量，所以您需要通过一个useState挂钩来控制它。每当状态改变时，React都会重新渲染你的组件，但它不能用let engine来做到这一点。我将初始值设置为undefined，但它可以是null或其他值。当引擎准备就绪时，我们将调用setEngine。
const [engine, setEngine] = useState(undefined);在声明useEffect的依赖关系时，您需要确保不依赖于在每次渲染时重新创建的函数。您可以使用useCallback和useMemo等记忆化技术，但这里我只是将createEngine函数移到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>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66319115
复制相关文章
相似问题
腾讯云开发者
