Javascript 国家赢得'；在类组件外部调用时不更新状态

所以对于一个学校项目，我需要使用javascript和React设计一个网站。我有两个对象，一个类组件实验和一个类组件AddUsers。实验类需要一些参数才能发布到我们的API并运行实验。其中之一是包含几个用户ID的列表。可以使用其他类AddUsers获取此列表。 这两个类在各自的状态下存储一个名为m_DataUsers的列表，表示用户ID的列表。 当添加用户时，一切都很完美，但当更改AddUser类中的实验状态时，问题就出现了。我使用此网站遵循了教程：

基本上，我需要在实验类之外定义一个函数，该函数使用setState（）更新状态，我使用updateDataUsers（dataUsers），然后将其绑定到实验类。如果我错了，请纠正我，但我认为绑定函数的位置无关紧要，所以我在实验的构造函数中定义了状态之后才绑定它。我导出这个updateDataUsers函数，因此从AddUser类调用它。调用函数时，我可以看到AddUsers类成功提交了他的用户ID数组（我登录到控制台）。但是在调用setState（）之后，状态保持不变

我在网上搜索发现，调用setState（）后，状态不一定会在调用setState（）后直接更新。这不是一个真正的问题，但是当发布到API时，m_DataUsers数组仍然是空的，并且我在API中也收到一个空列表。因此，我认为出于某种原因，setState（）函数不会更新实验状态

这是我的UpdateDautausers函数

export function updateDataUsers(dataUsers){
    this.setState({
            m_DataUsers: dataUsers,
    });
    console.log(this)
}

这是我的实验课

export default class Experiment extends React.Component{
constructor(experimentName, datasetName, props) {
    super(props);
    this.state = {
        m_Name: experimentName,
        m_DatasetName: datasetName,
        m_Loading: false,
        m_DataUsers: [],
    }



    updateDataUsers = updateDataUsers.bind(this);


}

getName(){
    return this.state.m_Name;
}

runExperiment(){
    console.log("RUNNING EXPERIMENT: ", this.state.m_DataUsers);
    axios.post("/api/workspace/run", {userName: store.getState().userName, experimentName: this.state.m_Name, ids: this.state.m_DataUsers, nrOfRecommendations: 5})
        .then(response =>  {
            if (response.data.isSuccessful === "True"){
                 console.log("EXPERIMENT SUCCESSFUL", response.data);
            }
            else{
                console.log(response.data.info)
            }
        })
        .catch(error => console.log(error))
}

delete(){
    axios.post("/api/workspace/deleteexperiment", {userName: store.getState().userName, experimentName: this.state.m_Name})
        .then(response => {
            if (response.data.isSuccessful === "True"){
                console.log("deleted");
                updateWorkspace();
            }
            else{
                console.log(response.data.info)
            }
        })
}


render() {
    return (
        <RightBar>
            <Box display="flex" alignContent="center">
                <List style={{color: 'black'}}>
                    <ListItem>
                        <Typography variant="h6">
                            {this.state.m_Name}
                        </Typography>
                    </ListItem>
                    <Divider/>
                    <ListItem>
                        <Button variant="contained" onClick={() => this.runExperiment() }
                                style={{backgroundColor: colorScheme.primaryColor, color: 'white', top: 15, width: '10vw'}}>
                            run
                        </Button>
                    </ListItem>
                    <ListItem>
                        <Button variant="contained" onClick={() => this.delete() }
                                style={{backgroundColor: colorScheme.primaryColor, color: 'white', top: 15, width: '10vw'}}>
                            delete
                        </Button>
                    </ListItem>
                    <ListItem>
                        <AddUsers experimentName={this.state.m_Name}/>
                    </ListItem>
                </List>
            </Box>
        </RightBar>
    )
}
}

导出默认类扩展React.Component{
构造函数（实验名称、数据集名称、道具）{
超级（道具）；
此.state={
m_Name:，
m_数据集名称：数据集名称，
m_加载：错误，
m_数据用户：[]，
}
updateDataUsers=updateDataUsers.bind（此）；
}
getName（）{
返回此.state.m_名称；
}
运行实验（）{
log（“运行实验：”，this.state.m_DataUsers）；
axios.post（“/api/workspace/run”，{userName:store.getState（）.userName，experimentName:this.state.m_Name，id:this.state.m_DataUsers，nrof推荐：5}）
。然后（响应=>{
if（response.data.issusccessful==“True”）{
log（“实验成功”，response.data）；
}
否则{
console.log（response.data.info）
}
})
.catch（错误=>console.log（错误））
}
删除（）{
post（“/api/workspace/deleteexperiment”，{userName:store.getState（）.userName，experimentName:this.state.m_Name}）
。然后（响应=>{
if（response.data.issusccessful==“True”）{
控制台日志（“已删除”）；
updateWorkspace（）；
}
否则{
console.log（response.data.info）
}
})
}
render（）{
返回(
{this.state.m_Name}
this.runExperiment（）}
样式={{backgroundColor:colorScheme.primaryColor，颜色：'white'，顶部：15，宽度：'10vw'}>
跑
this.delete（）}
样式={{backgroundColor:colorScheme.primaryColor，颜色：'white'，顶部：15，宽度：'10vw'}>
删除
)
}
}

最后，这是我的AddUsers类

export default class AddUsers extends React.Component{
constructor(props) {
    super(props);
    this.state = {
        m_ExperimentName: props.experimentName,
        m_DataUsers: [],
        m_SelectedDataUsers: [],
        m_GotDataUsers: false,
        m_IsOpen: false,

    }
}

getDataUsers(){
    axios.post("/api/workspace/getdatasetusers", {userName: store.getState().userName, experimentName: this.state.m_ExperimentName})
        .then(response => {
            if (response.data.isSuccessful === "True"){
                let tempList = []
                for (let i = 0; i < response.data.models[0].dataUsers.length; i++){
                    tempList.push({index: i, dataUserID: response.data.models[0].dataUsers[i].dataUserID.toString()})

                }
                this.setState({m_DataUsers: tempList, m_GotDataUsers: true})
            }
            else{
                console.log(response.data.info);
            }})

        .catch(err => console.log(err))
}

dialogSwitch(){
    if (this.state.m_IsOpen === true){
        this.setState({m_IsOpen: false});
    }
    else{
        this.setState({m_IsOpen: true});
    }
}

pickUsers(){
    const handleChange = (event) => {
        if (event.target.checked === true){
            let id = parseInt(event.target.name)
            let tempList = this.state.m_SelectedDataUsers;
            tempList.push(id);
            this.setState({m_SelectedDataUsers: tempList});
        }
        else{
            let id = parseInt(event.target.name);
            let tempList = this.state.m_SelectedDataUsers;
            let index = tempList.indexOf(id);
            tempList.splice(index, 1);
            this.setState({m_SelectedDataUsers: tempList});
        }

    }
    return (
        <div className={{display: 'flex'}}>
            <FormControl component="fieldset">
                <FormLabel component="legend">
                    pick users
                </FormLabel>
                <FormGroup>
                    {
                        this.state.m_DataUsers.map(user =>{
                            return (
                                <FormControlLabel
                                    control={<Checkbox onChange={handleChange} name={user.dataUserID}/>}
                                    label={user.dataUserID}
                                />
                            )
                        })
                    }
                </FormGroup>
            </FormControl>
        </div>
    )
}

isIDPicked(id, selected){
    var found = false;
    for (let j = 0; j < selected.length; j++) {
        if (selected[j] === id) {
            found = true;
            break;
        }
    }
    if (found === false){
        return false;
    }
    else {
        return true;
    }
}

pickRandomUsers(){
    var randomNr = Math.floor(Math.random() * (this.state.m_DataUsers.length)) + 1;
    let selected = []
    for (let i = 0; i < randomNr; i++){
        var randomIndex = Math.floor(Math.random() * (this.state.m_DataUsers.length));
        var id = this.state.m_DataUsers[randomIndex].dataUserID;
        while (this.isIDPicked(id, selected) === true){
            randomIndex = Math.floor(Math.random() * (this.state.m_DataUsers.length));
            id = this.state.m_DataUsers[randomIndex].dataUserID;
        }
        selected.push(id);
    }
    this.setState({m_SelectedDataUsers: selected});
}

render() {
    if (this.state.m_GotDataUsers === false){
        this.getDataUsers();
    }
    return (
        <div>
            <Button
            variant="contained"
            style={{backgroundColor: colorScheme.primaryColor, color: 'white', top: 15, width: '10vw'}}
            onClick={() => this.dialogSwitch()}
            >
                add users
            </Button>
            <Dialog open={this.state.m_IsOpen}>
                <DialogContent>
                    <Typography variant="h6">
                        Add users to experiment
                    </Typography>
                </DialogContent>
                <DialogContent>
                    <Button onClick={() => this.pickRandomUsers()}>
                        random
                    </Button>
                </DialogContent>
                <DialogContent>
                    {
                        this.pickUsers()
                    }
                </DialogContent>
                <DialogContent>
                    <Button onClick={() => this.dialogSwitch()}>
                        cancel
                    </Button>
                    <Button onClick={() => {
                        this.dialogSwitch();
                        updateDataUsers(this.state.m_SelectedDataUsers);
                    }}>
                        ok
                    </Button>
                </DialogContent>
            </Dialog>
        </div>
    )
}
}

导出默认类AddUsers扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
m_ExperimentName:props.ExperimentName，
m_数据用户：[]，
m_选择的数据用户：[]，
m_GotDataUsers:false，
穆·伊斯彭：错，
}
}
getDataUsers（）{
post（“/api/workspace/getdatasetusers”，{userName:store.getState（）.userName，experimentName:this.state.m_experimentName}）
。然后（响应=>{
if（response.data.issusccessful==“True”）{
让圣堂武士=[]
for（设i=0；iconsole.log（err））
}
dialogSwitch（）{
if（this.state.m_IsOpen==true）{
this.setState（{m_IsOpen:false}）；
}
否则{
this.setState（{m_IsOpen:true}）；
}
}
pickUsers（）{
常量handleChange=（事件）=>{
if（event.target.checked==true）{
let id=parseInt（event.target.name）
让templast=this.state.m_SelectedDataUsers；
圣殿骑士推（id）；
this.setState（{m_SelectedDataUsers:tempList}）；
}
否则{
让id=parseInt（event.target.name）；
让templast=this.state.m_SelectedDataUsers；
让index=templast.indexOf（id）；
模板拼接（索引，1）；
this.setState（{m_SelectedDataUsers:tempList}）；
}
}
返回(
挑选用户
{
this.state.m_DataUsers.map（用户