如何将输入 xml 数据解析为 json 以响应 xml2js？

Question

我正在尝试将输入 xml 数据解析为 json，以便在 xml2js 的帮助下作出反应。

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;

但是我遇到了无限重渲染错误。有人可以帮忙吗？

提前致谢

Answer 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>`}
/>

如何将输入 xml 数据解析为 json 以响应 xml2js？

How to parse input xml data to json in react with xml2js?

reactjs

xml2js