React中用XState实现API请求与条件渲染的问题排查及优化

现有代码中的核心问题 #

• 异步逻辑处理错误：把异步的fetchData同时放在action和invoke中，XState的action是同步执行的，异步操作必须通过invoke处理，重复调用会导致多次发起请求。
• fetchData函数不完整：try块未处理响应数据、未返回成功结果，无法传递渲染所需的判断依据；错误返回的格式不符合XState invoke的约定（invoke的onDone接收返回值，onError处理抛出的错误，而非返回错误对象）。
• 状态跳转无动态分支：loading状态的onDone直接固定跳转，没有根据接口返回的条件判断应该进入哪个组件渲染状态。
• 事件定义语法错误：组件渲染状态中的on字段缺少事件类型（比如REFRESH），直接写target会导致语法报错。
• 上下文未初始化：context没有存储数据、错误信息、渲染类型等必要字段，组件无法获取渲染所需的状态数据。
• 导出变量不匹配：状态机变量名为interviewMachine，但导出的是myMachine，会导致外部无法正确引入。

优化后的完整实现 #

import { createMachine, assign } from 'xstate'

// 异步请求函数：仅负责获取数据，返回处理后的结果或抛出错误
const fetchData = async (context, event) => {
  const { token } = event.params;
  const res = await fetch(api); // 替换为实际API地址
  if (!res.ok) throw new Error('请求失败');
  const data = await res.json();

  // 根据返回数据判断渲染类型，返回给状态机
  let renderType;
  if (data.someCondition) {
    renderType = 'mainComponent';
  } else if (data.anotherCondition) {
    renderType = 'otherComponent';
  } else {
    renderType = 'defaultComponent';
  }

  return { data, renderType };
}

const interviewMachine = createMachine(
  {
    id: 'dataFetchMachine',
    initial: 'idle',
    context: {
      data: null,       // 存储接口返回数据
      error: null,      // 存储错误信息
      renderType: null  // 标记当前需要渲染的组件类型
    },
    states: {
      idle: {
        on: {
          FETCH: 'loading' // 触发请求直接进入loading，由invoke处理异步
        }
      },
      loading: {
        invoke: {
          src: fetchData,
          onDone: {
            target: 'success',
            actions: assign({
              data: (_, event) => event.data.data,
              renderType: (_, event) => event.data.renderType,
              error: null
            })
          },
          onError: {
            target: 'error',
            actions: assign({
              error: (_, event) => event.data.message,
              data: null,
              renderType: null
            })
          }
        }
      },
      error: {
        on: {
          RETRY: 'loading' // 错误状态下支持重试
        }
      },
      success: {
        // 根据renderType动态跳转到对应的组件状态
        always: [
          { target: 'mainComponent', cond: (ctx) => ctx.renderType === 'mainComponent' },
          { target: 'otherComponent', cond: (ctx) => ctx.renderType === 'otherComponent' },
          { target: 'defaultComponent' }
        ]
      },
      mainComponent: {
        on: {
          REFRESH: 'loading' // 支持刷新重新请求
        }
      },
      otherComponent: {
        on: {
          REFRESH: 'loading'
        }
      },
      defaultComponent: {
        on: {
          REFRESH: 'loading'
        }
      }
    }
  },
  {
    actions: {
      // 这里可以放其他同步动作，异步逻辑都在invoke里处理
    }
  }
)

export default interviewMachine

关键优化点说明 #

1. 异步逻辑分离：仅通过invoke处理异步请求，action只负责同步更新上下文，符合XState的设计规范。
2. 完善fetchData函数：正确处理响应、抛出错误，返回包含渲染类型的结果，让状态机能根据返回值做分支判断。
3. 动态状态跳转：在success状态通过always和cond，根据context中的renderType自动跳转到对应的组件渲染状态。
4. 上下文管理：初始化并通过assign更新context中的数据、错误、渲染类型，让React组件可以通过useMachine获取这些值来渲染对应组件。
5. 修复语法错误：补全事件类型，修正导出变量名，确保代码可正常运行。

内容的提问来源于stack exchange，提问作者Xyz.WebDeveloper