如何将输入的 xml 数据解析为 json 以与 xml2js 做出反应？答案

【问题标题】：How to parse input xml data to json in react with xml2js?如何将输入的 xml 数据解析为 json 以与 xml2js 做出反应？
【发布时间】：2021-10-07 19:57:34
【问题描述】：

我正在尝试在 xml2js 的帮助下将输入的 xml 数据解析为 json。

import React, { useState } from "react";
import xml2js from "xml2js";

function Parser() {
  const [xmlData, setXmlData] = useState({});
  let parser = new xml2js.Parser();
  parser.parseString(
    `<email>
       <to>Test</to>
       <from>Test1</from>
       <heading>Test email</heading>
       <body>Email regards to xml data parsing in React</body>
       </email>`,
    function (err, result) {
      console.log(result);
      if (result) {
        setXmlData(result);
        return;
      }
      return;
    }
  );
  return (
    <div>
      Parse XML using ReactJs
      {JSON.stringify(xmlData)}
    </div>
  );
}

export default Parser;

但我收到无限重新渲染错误。有人可以帮忙吗？

提前致谢

【问题讨论】：

标签： reactjs xml2js

【解决方案1】：

由于parseString 是一个异步API，您需要将输入数据集作为依赖项调用in an useEffect hook，以避免在每次渲染时重新调用它。

为了可重用性，我还将输入数据移到了此处的道具中。

import React, { useState } from "react";
import xml2js from "xml2js";

function Parser({ inputData }) {
  const [xmlData, setXmlData] = React.useState(null);
  React.useEffect(() => {
    const parser = new xml2js.Parser();
    parser.parseString(inputData, function (err, result) {
      setXmlData(result);
    });
  }, [inputData]);
  return (
    <div>
      Parse XML using ReactJs
      {JSON.stringify(xmlData)}
    </div>
  );
}

export default Parser;

<Parser inputData={`<email>
       <to>Test</to>
       <from>Test1</from>
       <heading>Test email</heading>
       <body>Email regards to xml data parsing in React</body>
       </email>`}
/>

【讨论】：

您好，感谢您的回复。还有其他方法吗？目前它显示为 {"email":{"to":["Test"],"from":["Test1"],"heading":["Test email"],"body":["Email about to xml 数据解析在 React"]}} 但我想作为 {"email":{"to":"Test","from":"Test1","heading":"Test email","body":"Email关于 React 中的 xml 数据解析"}} 没有方括号
这取决于您使用的 xml2js 库。它apparently supports a explicitArray option 来控制这种行为。试试new xml2js.Parser({explicitArray: false})
非常感谢@AKX
嗨，Akx，你能看看stackoverflow.com/questions/68622784/…