如何从 React JS 的 react 项目的公共目录中的文件中读取 xml？

Question

在我的 react 项目公共文件夹中，我有一个名为 mySurvey.xml 的文件，我想在我的 src 目录中读取该文件，因此为简单起见，我尝试在 app.js 中读取它 p>

所以在我的 app.js 中，我尝试使用 fetch API 读取它，但它返回 index.html 文本作为响应，而不是文件的内容。

 // Fetch Function   
   fetch("./mySurvey.xml")
   .then(response => response.text())
   .then(data=>{
     console.log('File Data = ',data)
     let parser = new DOMParser();
     let xml = parser.parseFromString(data, "application/xml"); 
     console.log('XML = ',xml);
   })
  .catch(error =>{
     console.log('My Error = ',error);

})

在网络选项卡中，我检查了 fetch API 正在创建此 url http://localhost:3000/mySurvey.xml

这会加载html页面并且不会放弃xml数据

请指导我的方法是正确的还是有更好的方法！！

注意：- 公用文件夹中有很多 xml 文件，例如 mySurvey.xml，我将收到基于文件名的文件名，我必须从中读取数据。

Answer 1

fetch('abc.xml')
      .then((res) => res.text())
      .then(xmlString => new window.DOMParser().parseFromString(xmlString, "text/xml"))
      .then(data => setItem(data))
      .catch((err) => {
        console.log(err);
      });

Fetch 默认无法解析 xml。因此，我使用 DOMParser 将字符串解析为 XML 对象。获得 xml 对象后，您可以将其存储在您的状态中并根据需要对其进行操作