React + fetch：在我的网址中添加额外的字符和反斜杠答案

【问题标题】：React + fetch: adding extra characters and backslashes to my urlReact + fetch：在我的网址中添加额外的字符和反斜杠
【发布时间】：2021-08-21 20:00:15
【问题描述】：

我在 React 17 中有这段代码

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

而getLocalJson 方法位于不同的文件中：

export const getLocalJson = async (url, headers) => {
    console.log(url)
    const resp = await fetch(url, {'headers': headers});
    const json = await resp.json();
    return json;
}

但是从公用文件夹加载本地 JSON 文件的调用是：

请求网址：http://localhost:3000/json/login/%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C %5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx %5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson%5Clogin%5C%5Cdx%5Cjson %5Clogin%5C%5Cdx%5Cjson%5Clogin%5Clogin.json

这是 JSON

[
  {
    "order": 0,
    "systemName": "title",
    "friendlyName": "Login",
    "dataType": {
      "type": "TITLE"
    }
  },
  {
    "order": 1,
    "required": true,
    "systemName": "username",
    "friendlyName": "Username",
    "errorMsg": "Invalid username",
    "dataType": {
      "type": "TEXT"
    }
  },
  {
    "order": 2,
    "required": true,
    "systemName": "password",
    "friendlyName": "Password",
    "errorMsg": "Invalid password",
    "dataType": {
      "type": "PASSWORD"
    }
  },
  {
    "order": 3,
    "systemName": "title",
    "friendlyName": "Login",
    "dataType": {
      "type": "BUTTON",
      "submit": true
    }
  }
]

它会一遍又一遍地打电话

这个确切的代码在我的 ubuntu 开发盒上工作，但在我的 windows 盒上却失败了

【问题讨论】：

“它会一遍又一遍地调用” - setFields 具体做什么？对整体状态有什么影响？有什么东西会修改网址吗？是否有任何事情导致组件重新渲染或重新加载，或者props.headers 被更新？
setFields 是一个 useState 钩子，设置字段 var。将其注释掉没有任何效果。没有修改url，stirng直接传给fetch。
如果删除它没有任何效果，那么在我看来，问题可能超出了我们正在研究的范围。应用程序的 URL 是否更改？承载此useEffect 的整个组件是否由于组件层次结构的更高层而重新加载？这是否可以单独复制以供我们观察，可能在 CodeSandbox 中，甚至在此处作为 Stack Snippet 进行观察？
这看起来很奇怪，特别是因为这个确切的代码适用于 ubuntu chrome。它似乎与标题有关，请参见下面的 cmets。上游没有任何东西，这是在单页应用程序开始时显示的登录表单。

标签： reactjs json fetch

【解决方案1】：

我认为您传递标头的方式存在一些问题，请查看documentation 以获得更好的想法。

【讨论】：

似乎与此有关，但为什么它可以在 ubuntu chrome 而不是 windows chrome 上工作？当我更改 windows chrome 上的标题时，错误消失了，但它说 JSON 中没有错误
这可能是因为windows和ubuntu在系统中定位文件的方式不同。如果我正确理解您的问题，使用 fs 模块可能会消除错误并使获取请求保持一致。

【解决方案2】：

将你的函数放在你正在使用 useEffect 的组件主体中，并使用 useCallback 包装它，如下所示：

const getLocalJson =  useCallback( async (url, headers) => {
    console.log(url)
    const resp = await fetch(url, {'headers': headers});
    const json = await resp.json();
    
    return json;
  },[])

【讨论】：

我不能使用钩子，这段代码不在反应组件中。
这就是为什么我告诉你把它放在组件的代码中
但是我希望这段代码是可重用的，这就是为什么它在一个单独的文件中。
然后将函数放入依赖数组[props.headers ,getLocalJson]
这并不能解决我无法在我正在导入的共享代码中使用钩子的问题。