React/Express整合项目导入XML文件报404问题咨询

纯React脚手架项目自带的webpack-dev-server会默认托管项目内的静态资源，因此相对路径请求XML可以正常响应。当你把项目迁移到React+Express架构后，Express默认不会托管任何本地静态文件，所有未匹配路由规则的请求都会直接返回404，这就是你请求XML报404的核心原因。
不需要专门编写文件读取接口，直接配置静态资源托管即可，也可以根据需求选择写接口返回内容，两种可落地方案如下：

方案1：配置Express静态资源托管（改动最小，优先选） #

• 先将dzietnosc.xml移动到Express项目的静态资源目录下，推荐在项目根目录新建public/assets/文件夹存放该文件
• 在Express入口文件（通常是server.js/app.js）的所有路由规则之前，添加静态资源托管配置：

const express = require('express')
const path = require('path')
const app = express()
// 将public目录设为静态资源根目录
app.use(express.static(path.join(__dirname, 'public')))

// 其他路由、中间件配置写在这行之后

• 将前端axios的请求路径从相对路径../../assets/dzietnosc.xml改为绝对路径/assets/dzietnosc.xml。前端代码运行在浏览器环境，相对路径是基于当前页面URL计算的，层级很容易算错，用绝对路径可以避免这类问题。

配置完成后重启Express服务，再发起请求就能正常拿到XML内容。

方案2：单独编写接口返回XML内容 #

如果不想开放静态资源访问，也可以写单独的路由接口返回文件内容：

• 在Express路由配置中添加如下接口：

const fs = require('fs')
const path = require('path')

app.get('/api/fertility-data', (req, res) => {
  // 替换为你本地XML文件的实际存放路径
  const xmlFilePath = path.join(__dirname, 'assets/dzietnosc.xml')
  fs.readFile(xmlFilePath, 'utf-8', (err, xmlContent) => {
    if (err) {
      res.sendStatus(500)
      return
    }
    res.setHeader('Content-Type', 'application/xml; charset=utf-8')
    res.send(xmlContent)
  })
})

• 将前端axios请求地址改为/api/fertility-data即可。

你贴的React代码存在会引发无限重渲染的严重问题：绝对不要在render函数中调用setState。
render函数执行时只要检测到state变更，就会触发新一轮render，你在render遍历数据的过程中反复调用setState，会直接导致页面卡死、内存占用飙升。解析XML、组装tablica数组的逻辑应该全部挪到componentDidMount里，在拿到接口返回的XML数据后一次性处理完成，再通过setState把处理好的结果存入state，render函数只负责读取state做渲染，不要在渲染阶段修改任何state。

内容的提问来源于stack exchange，提问作者Skooczekk