Javascript 当用户向后导航时，React fetch挂起

这个问题完全使我迷惑。基本上，用户可以使用我创建的网站，只要他们直接键入URL或使用按钮导航，就不会出现任何问题。如果用户点击浏览器上的“后退”按钮，网站会将他们带到上一页。。。但是那里的任何回执都将无法发送。提取不会抛出错误。它将无限期地挂起。请注意下面的屏幕截图，其中显示了一个已挂起超过十分钟的请求：

这在网站的每个页面上都有完美的一致性。如果有人触发了

硬重新加载

，或者在chrome开发工具中单击挂起的请求旁边的

解释

，页面将正常加载

我甚至不知道应该包含什么代码。下面是一个任意示例组件：

用户使用浏览器返回按钮返回后组件挂起

import React from 'react'
import './UsersView.scss'
import {fetchGET} from '../../../../utils/apiUtils'
import UserRow from './UserRow'

class UsersView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users : []
    };

    this.componentWillMount = this.componentWillMount.bind(this);
  }

  componentWillMount(){
    var roles = [];
    var rolesLookup = JSON.parse(localStorage.getItem("roleById"));
    var idLookup = JSON.parse(localStorage.getItem("idByRole"));

    var permissionLookup = {};
    let filter = {is_active:true};
    fetchGET('/v1/permission/', filter).then(function (json) { //retrieve user context
      if(json.code){
        this.setAlertBox(json.message);
      }
      else{
        var permissions = json.Permission;
        for(var i = 0; i < permissions.length; i++){
          var permission = permissions[i];
          if(permission.user_id in permissionLookup){
            permissionLookup[permission.user_id].push(permission.role_id);
          }
          else{
            permissionLookup[permission.user_id] = [permission.role_id];
          }
        }
      fetchGET('/v1/user/', null).then(function (json) { //retrieve user context
        if(json.code){
          this.setAlertBox(json.message);
        }
        else{
          var users = json.User;
          var userRows = [];
          for(var i = 0; i < users.length; i++){
            var user = users[i];
            let roleIds = permissionLookup[user.uid];
            var newRow = <UserRow user={user} roles={Object.keys(idLookup)} key={i.toString()} rowId={i.toString()} role={rolesLookup[roleIds[0]]} handleChange={this.handleChange}/>;
            userRows.push(newRow);
          }
          this.setState({'users': userRows});
        }
      }.bind(this))
     }
    }.bind(this))
  }

  render() {
    return (
      <div className="usersView">
        <table className="table table-hover table-striped">
          <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Roles</th>
          </tr>
          </thead>
          <tbody>
          {this.state.users}
          </tbody>
        </table>
      </div>
    );
  }
}

export default UsersView

我在网上找不到任何类似的问题。如果有人有任何见解，我将非常真诚地感谢

更新

我注意到这个问题只在webpack的开发构建中出现。生产构建不会受到影响

更新

以下是每个请求的

buildHeaders

代码：

function buildHeaders(){
  var headers = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
  }
  var token = localStorage.getItem('token');
  if(token !== null) {
    headers['Authorization'] = 'Token ' + token;
  }
  return headers;
}

---

如果您完全陷入困境，我建议您创建一个当前项目的副本，但要以增量的方式包含从基础向上的文件（即从

main.js

、到路由器、到容器等），并查看在哪一点您会遇到无限循环或类似的情况。您能透露

buildHeaders（）的代码吗

函数，或者至少将标题值输出到控制台？sames正在发生在我身上。你解决了吗？我没能找到解决办法。因为它只发生在开发构建中，所以我一直与它生活在一起。不太理想，但我已经花了太多时间在这个问题上，我可以解决。如果你想明白了，一定要发帖！

function buildHeaders(){
  var headers = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
  }
  var token = localStorage.getItem('token');
  if(token !== null) {
    headers['Authorization'] = 'Token ' + token;
  }
  return headers;
}