React+fetch在Windows下请求URL被添加反斜杠多余字符且重复调用问题

问题诱发原因 #

1. 路径转义与拼接异常 #

Windows系统默认文件路径分隔符为反斜杠\，而Ubuntu等Linux系统默认使用正斜杠/。你传入的相对路径../json/login/login.json在Windows环境下被React开发服务解析时，错误地将路径计算生成的反斜杠直接拼入请求URL，反斜杠在URL规范中会被转义为%5C，就出现了大量转义字符与重复路径拼接的问题。
同时你使用的相对路径是相对于当前组件文件的寻址逻辑，但React中访问public目录下的静态资源需要使用站点根目录的绝对路径，相对路径在不同系统的路径解析逻辑差异下会出现重复拼接的故障。

2. 无限请求触发 #

你将props.headers放在useEffect依赖数组中，如果props.headers是父组件每次渲染时新生成的对象（比如父组件直接传入headers={{xxx: 'xxx'}}字面量），每次渲染生成的headers对象引用都不同，会导致useEffect重复执行。加上Windows下路径错误导致请求异常，没有触发正常的状态更新短路逻辑，就形成了无限请求循环。Ubuntu环境下路径解析正确，请求成功后状态更新稳定，因此不会重复触发。

修复方案 #

1. 修正静态资源路径 #

访问public目录下的资源直接使用根路径写法，无需写相对路径：

useEffect(() => {
    getLocalJson('/json/login/login.json', props.headers)
      .then(resp => { 
          setFields(resp);
    });
}, [props.headers]);

2. 稳定useEffect依赖 #

• 如果headers内容固定，将其抽为组件外的常量，避免每次渲染生成新对象
• 如果headers由父组件传入，要求父组件使用useMemo包裹headers对象，保证引用稳定
• 如果不需要监听headers变化，可直接将依赖数组改为空数组[]

3. 兼容多系统路径处理 #

如果代码需要同时兼容多系统，可以统一替换路径分隔符，修改getLocalJson方法：

export const getLocalJson = async (url, headers) => {
    // 统一替换所有反斜杠为正斜杠，避免Windows路径问题
    const normalizedUrl = url.replaceAll('\\', '/');
    const resp = await fetch(normalizedUrl, {'headers': headers});
    const json = await resp.json();
    return json;
}

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