javascript - 如何从 React JS 的 react 项目的公共(public)目录中的文件中读取 xml？

Question

在我的 react 项目公共(public)文件夹中，我有一个名为 的文件我的调查.xml ，我想在我的 src 目录中读取该文件，所以为了简单起见，我尝试在 app.js 中读取它

所以在我的 app.js 中，我尝试使用 来阅读它。获取 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 is created this url
http://localhost:3000/mySurvey.xml
这会加载 html 页面并且不会放弃 xml 数据
请指导我的方法是正确的还是有更好的方法!!
注意:- 公用文件夹中有很多 xml 文件，例如 mySurvey.xml，我将收到 fileName，我必须从中读取数据。

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 对象后，您可以将其存储在您的状态中并根据需要对其进行操作