XState
是一个用于构建状态机的 JavaScript 库。它提供了一种简洁的方式来定义和管理复杂的状态逻辑。状态机是一种模型,用于描述系统在不同状态下的行为以及状态之间的转换。
XState
支持多种类型的状态机:
onDone
在使用 XState
时,可以通过 send
方法发送事件,并在状态机的 onDone
动作中处理这些事件数据。
import { Machine, interpret } from 'xstate';
// 定义状态机
const lightMachine = Machine({
id: 'light',
initial: 'green',
states: {
green: {
on: {
TIMER: 'yellow'
}
},
yellow: {
on: {
TIMER: 'red'
}
},
red: {
on: {
TIMER: 'green'
},
onDone: {
target: 'green',
actions: (context, event) => {
console.log('Event data:', event.data);
}
}
}
}
});
// 创建状态机服务
const service = interpret(lightMachine)
.onTransition(state => {
console.log(state.value);
})
.start();
// 发送事件
setTimeout(() => {
service.send({ type: 'TIMER', data: { time: '5s' } });
}, 5000);
setTimeout(() => {
service.send({ type: 'TIMER', data: { time: '3s' } });
}, 8000);
Machine
函数定义一个简单的交通灯状态机。interpret
函数创建一个状态机服务,并在状态转换时打印当前状态。send
方法发送 TIMER
事件,并在 onDone
动作中处理事件数据。onDone
原因:可能是由于 onDone
动作未正确配置或事件数据未正确传递。
解决方法:
onDone
配置:确保 onDone
动作在状态定义中正确配置。onDone
动作中正确访问。onDone: {
target: 'green',
actions: (context, event) => {
console.log('Event data:', event.data);
}
}
通过以上步骤,可以确保事件数据从服务传递到 onDone
动作中。
玩转 WordPress 视频征稿活动——大咖分享第1期
小程序云开发官方直播课(应用开发实战)
第五届Techo TVP开发者峰会
第五届Techo TVP开发者峰会
云+社区技术沙龙[第10期]
云+社区技术沙龙[第5期]
云+社区技术沙龙 [第31期]
领取专属 10元无门槛券
手把手带您无忧上云