javascript - ReactJS - 在 fetch() 完成之前运行的明显代码

Question

我的应用程序的一些背景知识:

• 后端 - Python、Flask。数据库目前只是嵌套的字典和列表
• 前端 - Reactjs

我将引用的功能:

• FetchPlayers() - 使用 fetch() 从后端获取包含所有玩家的数组。它还使用 setState() 将玩家添加到状态。
• EditPlayer(playerid) - 使用 fetch() 向后端 POST 请求更改其中一名玩家的信息。

目前，当用户启动页面时，会调用 FetchPlayers() 来获取将要显示的玩家列表。用户还可以通过菜单编辑这些玩家信息。当用户确认编辑(通过按下按钮)时，应用程序首先调用 EditPlayer()，然后在调用 FetchPlayers() 之后的行中更新网页上的玩家列表。

问题是页面未使用新编辑进行更新。对于我来说，要查看新的编辑，我必须重新加载页面。这表明 FetchPlayers() 在 EditPlayer() 之前以某种方式被调用。有谁知道我该如何解决这个问题？

提前致谢!

编辑

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));


}

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

确认编辑时运行的代码

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

渲染函数:

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>
            );

列表元素渲染函数:

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

尝试从 Btn_EditPlayer() 中删除 this.FetchPlayers() 并将其添加为 edit_player 的回调，如下所示:

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

编辑(错别字)