ReactJS - Apparent code running before fetch() has finished

Question

Some background knowledge for my app:

• Backend - Python, Flask. The database is currently just nested dictionaries and lists
• Frontend - Reactjs

Functions that I will refer to:

• FetchPlayers() - uses fetch() to get a array with all the players in it from the backend. It also adds the players to the state using setState().
• EditPlayer(playerid) - uses fetch() to POST request the backend to change the information on one of the players.

So currently when the user starts the page, FetchPlayers() is called to get a list of players which will be displayed. Users can also edit these players information through a menu. When the user confirms the edit (through button press), first the app calls EditPlayer(), and then in the line after it calls FetchPlayers(), to update the list of players on the webpage.

The problem is the page is not updating with the new edit. For me the view the new edit I must reload the page. This suggests that FetchPlayers() is somehow being called before EditPlayer(). Does anyone know how I could fix this?

Thanks in advance!

Edit

edit_player(_playerid, _newfirstname, _newlastname, _newclass) {
    fetch('http://' + Globals.BaseIP + Globals.PortForBackend + '/api/editplayer', {
        //Options for the fetch request
        method:'POST',
        headers: {
            //Header objects
            'Accept':'application/json, text/plain, */*',
            'Content-type':'application/json'
        },
        body:JSON.stringify({UserID:UserServiceLocal.UserID(), token:UserServiceLocal.token(), GameID:this.props.gameID, PlayerID:_playerid, Firstname:_newfirstname, Lastname:_newlastname, Class:_newclass}),
        mode:'cors'
    })
    .catch((error) => console.log(error));


}

Code for FetchPlayers

FetchPlayers () {
    fetch('http://' + Globals.BaseIP + Globals.PortForBackend + '/api/fetchplayers', {
        //Options for the fetch request
        method:'POST',
        headers: {
            //Header objects
            'Accept':'application/json, text/plain, */*',
            'Content-type':'application/json'
        },
        body:JSON.stringify({UserID:UserServiceLocal.UserID(), token:UserServiceLocal.token(), GameID:this.props.gameID}),
        mode:'cors'
    })
    .then((res) => res.json())
    .then((data) => this.parse_fetch_players_response(data))
    .catch((error) => console.log(error))
}


parse_fetch_players_response(data) {
    console.log(data['players']);
    this.setState({Playerlist:data['players']});
    this.ListScrollToBottom();
}

Code that runs when confirm edit

Btn_EditPlayer() {
    this.edit_player(this.state.playereditID, this.state.playereditName, 
    this.state.playereditLastname, this.state.playereditClass);
    this.FetchPlayers();

Render function:

return (
                <div className="PageFooter" onKeyPress={(event) => this.EnterKeyPress_EditPlayer(event)}>
                    <Textinput className="FirstNameTextbox" id="playereditName" label="First name" value={this.state.playereditName} onChange={this.textinput_handleChange}/>
                    <Textinput className="LastNameTextbox" id="playereditLastname" label="Last name" value={this.state.playereditLastname} onChange={this.textinput_handleChange}/>
                    <Textinput className="ClassTextbox" id="playereditClass" label="Class" value={this.state.playereditClass} onChange={this.textinput_handleChange}/>
                    <button id='editPlayerButton' className="mdc-button mdc-button--unelevated mdl-button--colored mdc-ripple-surface" onClick={() => this.Btn_EditPlayer()}>Edit Player</button>
                    <button id="cancel-edit-player-btn" className="mdc-button mdc-button--raised mdl-button--colored mdc-ripple-surface" onClick={() => this.EditPlayer_Cancel_Btn()}>Cancel</button>
                </div>
            );

List Element Render function:

return (
            <div>
                <ul className="mdc-list" id="list-container" >

                    <li role="separator" className="mdc-list-divider"></li>

                    <li className="mdc-list-item" >
                        <span className="mdc-list-item__text list_text_firstname">
                            <b>Firstname</b>
                        </span>

                        <span className="mdc-list-item__text list_text_lastname">
                            <b>Lastname</b>
                        </span>

                        <span className="mdc-list-item__text list_text_class">
                            <b>Class</b>
                        </span>

                        <span className="mdc-list-item__graphic" role="presentation">
                            <i className="material-icons list_edit_icon">edit</i>
                            <i className="material-icons list_remove_icon">delete</i>

                        </span>
                    </li>
                    <li role="separator" className="mdc-list-divider"></li>

                    <ListEntry ListItemCSS="selected-list-entry" firstname="This is above" lastname="Butter" class="Jelly" id="1" delete_self={(playerID) => this.delete_item(playerID)} edit_button_clicked={(playerID) => this.Edit_Button_Clicked(playerID)}/>
                    <ListEntry firstname="Peanut" lastname="Butter" class="Jelly" id="1" delete_self={(playerID) => this.delete_item(playerID)} edit_button_clicked={(playerID) => this.Edit_Button_Clicked(playerID)}/>




                        {playerListItems}


                    </ul>
            </div>

            );

Answer 1

Try removing this.FetchPlayers() from Btn_EditPlayer() and adding it as a callback for edit_player like below:

this.edit_player(this.state.playereditID, this.state.playereditName, 
    this.state.playereditLastname, this.state.playereditClass, this.FetchPlayers);

edit_player(_playerid, _newfirstname, _newlastname, _newclass, callBack) {
    fetch('http://' + Globals.BaseIP + Globals.PortForBackend + '/api/editplayer', {
        //Options for the fetch request
        method:'POST',
        headers: {
            //Header objects
            'Accept':'application/json, text/plain, */*',
            'Content-type':'application/json'
        },
        body:JSON.stringify({UserID:UserServiceLocal.UserID(), token:UserServiceLocal.token(), GameID:this.props.gameID, PlayerID:_playerid, Firstname:_newfirstname, Lastname:_newlastname, Class:_newclass}),
        mode:'cors'
    }).then((res) => {
        // run your callback (fetchPlayers in this case) only when we know the update is done.
       callBack()
    }).catch((error) => console.log(error));
}

Edit (typooo)

Answer 2

It's impossible to know without seeing the code, but usually the problem is that you are not storing the information in state or your JSX in the render return isn't using the properties of this.state so it doesn't know to rerender.