How to cancel a request in componentWillUnMount

Question

i want to cancel the load_items request on componentWillUnmount. I am not sure how to do it? could someone help me with this. Thanks.

What i have tried to do?

I have a parent component ViewItems and child component ItemsList. In the ViewItems component i retrieve the items list from the server using load_items method which in turn uses client.get_file method. and store those items list in state named "items". I call this load_items method in componenDidMount method.However doing so it sometimes displays items for previous item. This happens sometimes. I would like to have the proper item details in the state.

I think i have to cancel the load_items request before updating the state again.

Below is the code ,

class ViewItems extends React.PureComponent {
constructor(props) {
    super(props);
    this.default_root_item = {
        name: 'Items',
        index: 0,
        children: [],
    };
    this.state = {
        root_items: this.default_root_item,
        items: [],
    };
 }

componentDidMount() {
    this.load_items();
}

componentDidUpdate(PrevProps) {
    if (PrevProps.item_id !== this.props.item_id) {
        this.load_items();
    }
}

componentWillUnmount() {
    this.unlisten_path_change();
}

load_items = () => {
    const file_name = 'file_name.json';
    client.get_file(this.props.item_id, file_name, 'json')
        .then((request) => {
            const items = request.response;
            this.setState({items: [this.default_root_item]});}
    this.handle_path_change(this.props.location.pathname);})};

    return (
        <ChildComponent            
             on_close={this.handle_item_close}
             root_item={this.state.root_item}/>)}

export default class ChildComponent extends React.PureComponent {
    <Items
        items={root_item}/>
    function Items(props) {
    return (
        <ul className="Items_list">
            <div className="items">
               {props.items.map((item, index) => {
                return (
                   <Item
                       key={index}
                       item={item}
                   />
                );
               })}
            </div>
        </ul>
       );
    }
}

export function get_file(qrcode, file_name, response_type,on_progress, cancel) {
    const local_override_defined = item_files[qrcode] && item_files[qrcode][file_name];
    if (local_override_defined) {
        const file = item_files[qrcode][file_name];
        const reader = new FileReader();

        return new Promise(resolve => {
            if (response_type === 'blob') {
                resolve({response: file});
            } else {
                  reader.onload = () => {
                  if (response_type === 'json') {
                      resolve({response: JSON.parse(reader.result)});
                  } else {
                      resolve({response: reader.result});
                  }
            };
            reader.readAsText(file);
        }
    });
}

 return new Promise((resolve, reject) => {
    item_file_get_url(qrcode, file_name).then(({response}) => {
        const request = new XMLHttpRequest();
        request.addEventListener('progress', on_progress);
        request.open('GET', response.url);
        request.responseType = response_type;
        send_request(request, undefined, cancel, response.url).then(resolve).catch(reject);

    }).catch(reject);
});

}