React fetch freezes when user moves back

This problem completely puzzles me. Basically, the user can use the site that I created without any problems if they either type in the URLs directly or use the buttons for navigation. If the user clicks the "Back" button in the browser, the site will display them on the previous page on which they were ... but any selection there will not be sent. Retrieval will not result in errors. He will just sit in pendingunlimited time. Pay attention to the screenshot below showing the only request that is pending within ten minutes:

enter image description here

This happens with perfect consistency with every page of the site. If someone starts hard reloador clicks on explanationnext to the request freezing in chrome dev tools, the page loads normally.

I'm not even sure which code to include. I include an arbitrary sample component below:

The component freezes after the user returns with the back button.

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

The following code defines how the selection works:

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()
  })
}

I could not find a similar problem on the net. If anyone has an understanding, I would really appreciate it.

UPDATE

I noticed that this problem only occurs in development built from webpack. Production assembly does not suffer from this.

UPDATE

Here is the code buildHeadersfor the request:

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;
}
+4

Source: https://habr.com/ru/post/1669904/


All Articles