XState如何将服务事件数据传递到onDone跳转后的success状态

你可以通过两步操作分别传递原始表单数据和校验返回结果到success状态： #

核心逻辑说明 #

• 触发VALIDATE事件时先把携带的表单数据存入状态机context
• 校验完成后通过onDone事件参数拿到doValidate的返回值，同样存入context

修改后代码示例 #

id: 'validator',
initial: 'populating',
// 提前声明需要存储的字段
context: {
  rawFormData: null, // 存储原始表单数据
  validateResult: null // 存储校验返回结果
},
states: {
  populating: {
    on: {
      VALIDATE: {
        target: 'validating',
        // 接收VALIDATE事件携带的formData，存入context
        actions: assign({
          rawFormData: (_, event) => event
        })
      }
    }
  },
  validating: {
    invoke: {
      src: (context, data) => doValidate(data),
      onDone: {
        target: 'success',
        actions: assign({
          // event.data就是doValidate执行完成后的返回值
          validateResult: (_, event) => event.data
        })
      },
      onError: 'failure'
    }
  },
  success: {
    invoke: {
      // 这里从ctx里就能拿到两个需要的数据
      src: (ctx)=>{
        console.log("原始表单数据：", ctx.rawFormData)
        console.log("校验返回结果：", ctx.validateResult)
      }
    } 
  },
}

补充说明 #

如果你的doValidate返回值本身已经包含了原始表单数据，你可以不用存rawFormData，直接从校验结果里取对应字段即可。

内容的提问来源于stack exchange，提问作者Nathan Leggatt