reactjs - 在 xState 操作中设置上下文并触发方法

Question

我有一个处理输入表单的简单状态机

export const chatMachine = Machine({
  id: 'chat',
  initial: 'idle',
  states: {
    idle: {
      on: {
        SET_MESSAGE: { actions: ['handleMessageChange'] },
        COMMENT_SUBMITTED: {
          actions: ['submitComment']
        }
      }
    }
  }
});

我希望该submitComment动作触发一个函数，然后在上下文中重置一个字段，如下所示：

submitComment: (ctx, e) => {
            e.payload(ctx.message);
            assign({
              message: ''
            });
          }

这行不通。

它会触发我传入的方法，但不会使其进入分配位。

我可以在一个动作中做两件事还是应该创建两个单独的动作？

Answer 1

您应该创建两个单独的操作，因为它们是两个单独的操作。

我不确定是什么e.payload(ctx.message)，但事件应该是纯粹的数据——你不应该把函数放在事件中。

另外，assign(...)也不是必须的。它是一个纯函数，返回一个类似于{ type: 'xstate.assign', ...}. XState 的任何操作都不是强制性的。

尝试这个：

// ...
COMMENT_SUBMITTED: {
  actions: ['submitComment', 'assignComment']
},

// ...
actions: {
  submitComment: (ctx, e) => { ... },
  assignComment: assign({ message: '' })
}