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

Posted 2023-02-22

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

【英文标题】：How to read xml from file inside public directory in react project in React JS?

【发布时间】：2021-06-02 19:48:35

【问题描述】：

在我的 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，我将收到基于文件名的文件名，我必须从中读取数据。

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

【讨论】：

基本上，我的问题是我无法在获取请求中访问 mySurvey.xml

@John 这很奇怪。它应该从公用文件夹中获取没有任何问题。我刚刚在我的机器上尝试了一个新项目，它成功了

您在哪个文件中编写了 fetch API 代码，能否分享该文件和代码的屏幕截图

@John 据我所知，他在 App.js 的 src 中写过

在网络选项卡中，我检查了 fetch API 正在创建这个 url localhost:3000/mySurvey.xml 这会加载 html 页面并且不会放弃 xml 数据