问题描述
我正在通过向后端发送分配任务的请求来更新任务属性,此请求是在自定义组件上,在调用过程中单击按钮时发出的。
我可以在我的 twilio 控制台中看到更新进行得很顺利,新值显示在那里,但我的 flex 组件上的任务道具没有更新,自分配以来保持相同的属性。
有没有办法在 flex 中“刷新”任务?我需要这个更新的属性才能在我的自定义组件上执行条件渲染。
预先感谢任何帮助我的人。
import React from 'react';
import { withTaskContext } from '@twilio/flex-ui';
class IsRecording extends React.Component {
constructor(props) {
super(props);
}
render() {
// this.task = this.props.tasks
return (
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#E50000">
<path
d="M16 16c0 1.104-.896 2-2 2h-12c-1.104 0-2-.896-2-2v-8c0-1.104.896-2 2-2h12c1.104 0 2 .896 2 2v8zm8-10l-6 4.223v3.554l6 4.223v-12z"/>
<animate
attributeType="XML"
attributeName="fill"
values="#800;#f00;#800;#800"
dur="1.5s"
repeatCount="indefinite"/>
</svg>
</div>
)
}
};
export default withTaskContext(IsRecording);
解决方法
这里是 Twilio 开发者布道者。
如果您可以访问 Flex 中的任务对象,则无需通过后端访问。相反,您可以调用 task.setAttributes
,这将直接更新任务属性,并使其在 Flex 中的任何地方更新状态。
然而,这里的困难在于主管不会实时查看任务,因此您需要做更多的工作才能让主管监听任务的变化。我玩了一会儿,就开始工作了。它使用 Sync liveQuery interface 订阅工作人员任务的更新。
我们在 componentDidMount
上创建实时查询订阅。创建实时查询时的第一个参数是“tr-task”,它指的是系统中的所有任务。第二个参数是查询,在本例中,我们查询的是该工作线程的所有任务。
一旦我们获得查询,我们就可以加载当前项目并将它们设置为状态。然后,我们会监听添加、更新和删除,并相应地更新状态。
在 render
函数中,我们计算是否有任何任务具有 isRecording
属性并相应地显示图标。
这是 <IsRecording>
组件:
import React from "react";
import { Manager } from "@twilio/flex-ui";
class IsRecording extends React.Component {
constructor(props) {
super(props);
this.state = {
tasks: [],};
}
componentDidMount() {
Manager.getInstance()
.insightsClient.liveQuery(
"tr-task",`data.worker_sid == "${this.props.worker.sid}"`
)
.then((query) => {
this.liveQuery = query;
const items = query.getItems();
this.setState({ tasks: Object.values(items) });
query.on("itemAdded",(item) => {
this.setState((prevState) => ({
tasks: [...prevState.tasks,item.value],}));
});
query.on("itemUpdated",(item) => {
this.setState((prevState) => ({
tasks: [
...prevState.tasks.filter((task) => task.sid !== item.value.sid),item.value,],}));
});
query.on("itemRemoved",(item) => {
this.setState((prevState) => ({
tasks: prevState.tasks.filter(
(task) => task.sid !== item.previousItemData.sid
),}));
});
})
.catch((err) =>
console.debug(`Error when subscribing to live updates for Tasks`,err)
);
}
componentWillUnmount() {
if (this.liveQuery) {
this.liveQuery.removeAllListeners();
this.liveQuery.close();
}
}
render() {
if (this.state.tasks.some((task) => task.attributes.isRecording)) {
return (
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#E50000">
<path d="M16 16c0 1.104-.896 2-2 2h-12c-1.104 0-2-.896-2-2v-8c0-1.104.896-2 2-2h12c1.104 0 2 .896 2 2v8zm8-10l-6 4.223v3.554l6 4.223v-12z" />
<animate attributeType="XML" attributeName="fill" values="#800;#f00;#800;#800" dur="1.5s" repeatCount="indefinite" />
</svg>
</div>
);
} else {
return null;
}
}
}
export default IsRecording;
您可以像这样将它附加到 WorkersDataTable
:
flex.WorkersDataTable.Content.add(
<ColumnDefinition
key="is-recording"
header={"Recording"}
content={(items) => {
return (
<IsRecording
key={`is-recording-${items.worker.sid}`}
worker={items.worker}
/>
);
}}
/>
);
,
我是通过从 redux 存储中读取来完成此操作的。以下已修改,所以我不透露专有知识。
- 为 Twilio reservedCreated 事件创建自定义侦听器
manager.workerClient.on("reservationCreated",this.acceptTask);
- 下面获取更新的任务。如果我们直接使用 task,除非事情发生了变化,否则它将是陈旧的对象。
async acceptTask(reservation) {
const updatedTask = this.manager.store.getState().flex.worker.tasks.get(reservation.task.sid);
// consume it
// get the updated attributes with updatedTask.attributes
}
希望对您有用/有帮助。