React环境下如何将JSON中嵌套的XML字符串转换为JSON格式？

解决步骤： #

1. 安装XML转JSON工具库
   使用xml2js这个常用的库处理XML解析，在项目中执行安装命令：

   npm install xml2js
   # 或使用yarn
   yarn add xml2js
   

2. 编写数据转换函数
   遍历后端返回的数组，判断每个对象的items字段类型：如果是XML字符串则解析为JSON数组，若已是数组则直接保留。同时加入错误处理，避免单个解析失败影响整体流程：

   import { parseStringPromise } from 'xml2js';
   
   async function processProducts(rawProducts) {
     return Promise.all(rawProducts.map(async product => {
       try {
         let items = product.items;
         // 识别XML字符串类型
         if (typeof items === 'string') {
           // 解析XML，explicitArray设为false避免单个元素自动转数组
           const parsedXml = await parseStringPromise(items, { explicitArray: false });
           // 统一转为数组格式，和原生JSON的items结构对齐
           items = Array.isArray(parsedXml.items.item) ? parsedXml.items.item : [parsedXml.items.item];
         }
         return { ...product, items };
       } catch (error) {
         console.error(`解析价格${product.price}的XML失败:`, error);
         // 解析失败时返回原数据，可根据业务需求调整处理逻辑
         return product;
       }
     }));
   }
   

3. 在React组件中应用
   在数据请求完成后调用转换函数，将处理后的数据用于页面渲染：

   import { useEffect, useState } from 'react';
   import { parseStringPromise } from 'xml2js';
   
   // 上述processProducts函数可放在此处或单独文件导入
   
   function ProductList() {
     const [products, setProducts] = useState([]);
   
     useEffect(() => {
       async function fetchAndProcessData() {
         // 替换为你的实际API地址
         const response = await fetch('/api/products');
         const rawData = await response.json();
         const processedData = await processProducts(rawData);
         setProducts(processedData);
       }
       fetchAndProcessData();
     }, []);
   
     return (
       <div className="product-list">
         {products.map((product, idx) => (
           <div key={idx} className="product-card">
             <h4>{product.price} {product.currency}</h4>
             <img src={product.productImage} alt="产品图片" width="120" />
             <div className="item-info">
               <h5>包含物品：</h5>
               <ul>
                 {product.items.map((item, itemIdx) => (
                   <li key={itemIdx}>
                     尺寸：{item.size} | 涂层：{item.coating} | 数量：{item.amount}
                   </li>
                 ))}
               </ul>
             </div>
           </div>
         ))}
       </div>
     );
   }
   
   export default ProductList;
   

关键说明： #

• xml2js的parseStringPromise方法支持异步解析，适配React的异步数据流逻辑
• explicitArray: false配置避免单个<item>元素被自动包裹为数组，我们手动处理后统一为数组格式，保证和原生JSON的items结构完全一致
• 错误处理部分可根据业务需求调整，比如给用户展示错误提示，或过滤解析失败的产品

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