XState:属性“操作”的类型不兼容

Question

我正在用TypeScript编写我的第一个XState驱动的应用程序，使用微软的快速框架。我的states.loading.invoke.onDone.actions属性上有一个编译时错误，如下所示：

export const questions = {
  initial: 'loading',
  states: {
    loading: {
      invoke: {
        id: 'loadQuestions',
        src: (context, event) => fetchQuestions,
        onDone: {
          target: 'asking',
          actions: assign({
            questions: (context, event: any) => event.data // this is generating an error
          })
        },
        onError: {}
      },
      tags: ['loading'],
    },
    asking: {
      always: [{
        target: '#search',
        cond: 'questionsExhausted'
      }],
      on: {
        QUESTION_ANSWERED: ''
      }
    }
  }
}

这台机器是这样的：

const states = {questions, search};

const initial = 'questions';

interface EventsSearchContext  {
  questions: Question[];
}

const context = {
  questions: []
};

const config = {
  schema: {
    context: {} as EventsSearchContext
  },
  id: 'eventsSearch',
  initial,
  context,
  states
}

const eventsSearchMachine = createMachine(config);

我的search状态是这样的：

export const search = {
  id: 'search',
  initial: 'performingSearch',
  states: {
    performingSearch: {},
    displayingResults: {}
  }
};

目前只是一个基本的大纲，但是这个错误正在产生：

Types of property 'onDone' are incompatible.
  Type '{ target: string; actions: AssignAction<unknown, any>; }' is not assignable to type 'string | SingleOrArray<TransitionConfig<EventsSearchContext, DoneInvokeEvent<any>>> | undefined'.
    Type '{ target: string; actions: AssignAction<unknown, any>; }' is not assignable to type 'TransitionConfig<EventsSearchContext, DoneInvokeEvent<any>>'.
      Types of property 'actions' are incompatible.
        Type 'AssignAction<unknown, any>' is not assignable to type 'Actions<EventsSearchContext, DoneInvokeEvent<any>> | undefined'.
          Type 'AssignAction<unknown, any>' is missing the following properties from type 'Action<EventsSearchContext, DoneInvokeEvent<any>>[]': length, pop, push, concat, and 29 more.

只有一个onDone，所以希望清楚这是从哪里来的。

网络上没有任何解决方案，但故障排除页面确实提到了一个类似的问题。我试过了，但不幸的是它不起作用。有什么想法吗？

Answer 1

在尝试复制时，我找到了一个对我有用的解决方案，即使用服务模式属性(如正式文件中的)。

以下几点我认为是可行的：

import { createMachine, assign } from 'xstate'
    
interface EventsSearchContext  {
  questions: Question[];
}

const eventsSearchMachine = createMachine({
  schema: {
    context: {} as EventsSearchContext,
  },
  id: 'eventsSearch',
  initial: 'questions',
  context: {
    questions: []
  },
  states: {
    questions: {
      initial: 'loading',
      states: {
        loading: {
          invoke: {
            id: 'loadQuestions',
            src: 'fetchQuestions',
            onDone: {
              target: 'asking',
              actions: 'assignQuestion'
            },
            onError: 'asking',
          },
          tags: ['loading'],
        },
        asking: {
          always: [{
            target: '#search',
            cond: 'questionsExhausted'
          }],
          on: {
            QUESTION_ANSWERED: ''
          }
        }
      }
    },
    search: {
      id: 'search',
      initial: 'performingSearch',
      states: {
        performingSearch: {},
        displayingResults: {}
      }
    }
  }
}, {
  services: {
    fetchQuestions,
  },
  actions: {
    assignQuestion: assign({
      questions: (context, event: any) => event.data
    })
  }
})