React(Next.js)解析XML响应报错：文档元素后存在无效内容

1. 修正API输出的XML格式（核心前提） #

XML语法强制要求单一根元素，你的API返回同时存在<message>和多个<result>，属于非法格式，这是解析报错的根本原因。优先调整API的XML响应结构，把所有元素包裹在一个统一根节点内，示例：

<api-response>
  <message>Success</message>
  <result>数据1</result>
  <result>数据2</result>
</api-response>

2. 预处理非法XML（无法修改API时的临时方案） #

如果暂时无法调整API输出，解析前手动给原始XML套一个根节点，再交给解析库处理：

// JavaScript示例：预处理原始XML字符串
const rawXml = '<message>Success</message><result>数据1</result><result>数据2</result>';
const wrappedXml = `<temp-root>${rawXml}</temp-root>`;

3. 配置解析库处理数组元素 #

使用xml-to-json类库时，需明确指定哪些节点是数组（比如多个<result>），避免被合并为单个对象。以常用的xml2js为例：

const xml2js = require('xml2js');
const parser = new xml2js.Parser({ 
  explicitArray: false, 
  array: ['result'] // 强制将<result>解析为数组
});

parser.parseString(wrappedXml, (err, parsedData) => {
  if (err) throw err;
  console.log(parsedData['temp-root']); // 包含message和result数组
});

4. 原生解析器备选方案 #

如果第三方库适配困难，可直接用环境原生XML解析器手动提取数据：

// 浏览器环境示例
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(wrappedXml, 'text/xml');

const message = xmlDoc.querySelector('message').textContent;
const results = Array.from(xmlDoc.querySelectorAll('result'))
  .map(el => el.textContent);

const finalData = { message, results };

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