reactjs - 如何给机器人动态请求?
问题描述
我刚刚找到了一个名为 Robot 的有限状态模块。它非常轻巧且简单。我遇到了一个无法解决的情况,那就是在 Robot 内部创建一个对 API 的动态请求。我试过这个
机器人.js
const context = () => ({
data: [],
});
export const authRobot = (request) =>
createMachine(
{
ready: state(transition(CLICK, 'loading')),
loading: invoke(
request,
transition(
'done',
'success',
reduce((ctx, evt) => ({ ...ctx, data: evt }))
),
transition(
'error',
'error',
reduce((ctx, ev) => ({ ...ctx, error: ev }))
)
),
success: state(immediate('ready')),
error: state(immediate('ready')),
},
context
);
我像这样在我的反应组件中使用它
// ...
export default function Login() {
const [current, send] = useMachine(authRobot(UserAPI.getData));
const { data } = current.context;
function handleSubmit(e) {
e.preventDefault();
send(CLICK);
}
useEffect(() => {
console.log(data);
console.log(current);
console.log(current.name);
}, [data]);
// ...
当我单击按钮时发生了问题,我的 Web 控制台记录了许多数据。似乎该事件被多次调用。我能在这里做什么?
解决方案
我认为这里的问题是useMachine()
当通过不同的机器时会触发重新渲染。由于您在渲染函数中创建了一台新机器,因此 useMachine 每次都将其视为不同的机器。
我会在这个闭包之外创建你的机器。
推荐阅读
- vue.js - 如何删除 *.vue 文件中的所有注释和/或空格和/或空行
- r - 从数据框中的特定列中选择奇数行
- javascript - 将回调的结果按顺序沿链向下传递到外部回调
- sql - 为什么ROWNUM <=,左外连接和子查询的这种组合有时会给出null
- c# - 如何在 C# 中的多个 XML 文件中搜索 XElement 属性值?
- php - 使用 foreach 循环添加 DateTime 间隔
- ios - SwiftUI 中的 CALayer 等效项
- asterisk - “请选择 PBX 的默认区域设置”页面在 FreePBX 中经常出现
- reactjs - 生产模式风格的组件缩小导致类型错误
- python - Flask 返回重复列表