Question

这个问题让我完全不知所措。基本上，只要用户直接输入网址或使用按钮进行导航，用户就可以使用我创建的网站而不会出现任何问题。如果用户点击浏览器上的后退按钮，该站点将把它们带到他们所在的上一页...但是那里的任何提取都将无法发送。获取不会抛出错误。它只会无限期地pending。请注意下面的屏幕截图，其中显示了一个已超过十分钟的待处理请求：

这与网站中的每个页面完美一致。如果有人触发hard reload，或点击Chrome开发工具中挂起的请求旁边的explanation，该页面将正常加载。

我甚至不确定包含哪些代码。我在下面包含了一个任意的示例组件：

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

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

下面是定义fetch如何工作的代码：

var fetchGET = function fetchGET(endpoint, parameters){
  var url = process.env.__API__ + endpoint; // eslint-disable-line no-undef
  if(parameters){
    url = url + '?';
    for (var key in parameters){
      url=url + key + '=' + parameters[key] + ',';
    }
    url = url.slice(0, -1); //remove the last comma from the end of the params
  }
  var headers = buildHeaders();
  return fetch(url, {
    method: 'GET',
    headers: headers
  }).then(function (response) {
    return response.json()
  })
}

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

更新

我注意到这个问题只出现在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;
}

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

0 个答案: