我们目前尝试用React而不是纯HTML和JS重写Azure Communication Service的英雄应用程序，并且遇到了调用客户端示例化的问题。我们尝试了不同的解决方案来创建新的客户端示例，但它就是不起作用。最好我们创建一个新的示例并将其存储在状态变量中。
import {
CallClient,
} from '@azure/communication-calling';
....
const [incomingCall, setIncomingCall] = useState(() => new CallClient());这将导致以下错误：
X [ERROR]无法赋值给“f”，因为它是一个常量
来自文档：“CallClient一次只能有一个活动的CallAgent示例。”
https://learn.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/callclient?view=azure-communication-services-js
我猜React可能多次运行导入或重新渲染网站。使用useEffect和setter也会导致同样的问题。
有人知道如何处理这样的问题吗？
1条答案
按热度按时间mqxuamgl1#
在React组件中保持调用“state”是非常有问题的。如果东西被挂载/卸载，你会丢失所有的数据。很容易意外地搞砸并强制重新渲染，这也可能影响组件中保存的状态。
https://reactjs.org/docs/hooks-effect.html
useEffect是一个非常强大的React钩子，但如果不了解它的真正用途以及你需要做什么，它就不能在任何地方使用。这里建议在生产环境中将Calling sdk调用从React组件中分离出来，否则您可能会遇到上面列出的场景。
UI团队遇到了这种类型的问题，这就是为什么我们选择维护调用功能以及数据在react组件之外的位置。
https://github.com/Azure/communication-ui-library/tree/main/packages/calling-stateful-client
能够将我们的数据与UI代码分开意味着我们可以挂载/卸载组件并渲染/重新渲染UI，而不必担心由于React的算法如何确定组件何时应该渲染而意外调用函数
如果你正在使用React，我们建议你试试我们构建的web ui库。
https://github.com/Azure/communication-ui-library
您可以在此处了解有关库以及如何导入库的更多信息：
https://www.npmjs.com/package/@azure/communication-react