React中集成JSONata后如何处理Promise形式的输出并应用？

你的reconfigureQuery函数返回的是一个Promise（从控制台输出能看到它已处于fulfilled状态，结果是目标数组），所以在React应用里需要用异步方式获取最终数据，下面是具体实现方法：

1. 调整工具函数（可选，让异步逻辑更清晰） #

可以把reconfigureQuery改成async函数，明确它的异步特性：

import jsonata from "jsonata";

export const reconfigureQuery = async (responseData) => {
    const jsonataQuery1 = `
    {
      "output": $distinct(response.{
        "enterpriseid" : enterpriseid,
        "enterprise": enterprise,
        "bookingvalue": $sum($filter($$.response, function($item) {$item.enterpriseid = enterpriseid}).bookingvalue),
        "foodmiles": $sum($filter($$.response, function($item) {$item.enterpriseid = enterpriseid}).foodmiles),
        "emissions": $sum($filter($$.response, function($item) {$item.enterpriseid = enterpriseid}).emissions)
      })
    }
    `;

    const evaluateQuery = async (query, data) => {
      const expression = jsonata(query);
      // jsonata v2+的evaluate方法默认返回Promise，用await获取结果
      const result = await expression.evaluate(data);
      return result;
    };

    const enterprise1 = await evaluateQuery(jsonataQuery1, { response: responseData });
    return enterprise1;
};

2. 在React组件中使用 #

方式一：useEffect + async/await（函数组件常用） #

通过状态管理数据，用useEffect触发异步调用：

import { useState, useEffect } from 'react';
import { reconfigureQuery } from './your-file-path';

function EnterpriseStats() {
  const [enterpriseData, setEnterpriseData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const processData = async () => {
      try {
        // 替换成你的原始数据源（接口返回/本地数据）
        const rawData = [/* 原始JSON数组 */];
        const processedResult = await reconfigureQuery(rawData);
        // 注意：你的查询返回的是带output字段的对象，需取output拿到目标数组
        setEnterpriseData(processedResult.output);
      } catch (err) {
        console.error('数据处理出错:', err);
      } finally {
        setLoading(false);
      }
    };

    processData();
  }, []);

  if (loading) {
    return <div>加载中...</div>;
  }

  // 渲染处理后的数据
  return (
    <div className="enterprise-list">
      {enterpriseData.map(item => (
        <div key={item.enterpriseid} className="enterprise-item">
          <h4>{item.enterprise}</h4>
          <p>预订总额：{item.bookingvalue}</p>
          <p>食品里程：{item.foodmiles}</p>
          <p>排放量：{item.emissions}</p>
        </div>
      ))}
    </div>
  );
}

export default EnterpriseStats;

方式二：.then()链式调用 #

如果不习惯async/await，也可以用Promise的链式调用：

useEffect(() => {
  const rawData = [/* 原始数据源 */];
  reconfigureQuery(rawData)
    .then(processedResult => setEnterpriseData(processedResult.output))
    .catch(err => console.error('数据处理出错:', err))
    .finally(() => setLoading(false));
}, []);

关键注意点 #

• 你的JSONata查询返回的是包含output字段的对象，必须取processedResult.output才能拿到目标数组
• jsonata v2及以上版本的evaluate方法默认返回Promise，所以必须用异步方式处理结果

内容的提问来源于stack exchange，提问作者Iliyas Ahmed Farooqui