ReactJs，this.setState 没有像我预期的那样工作

Question

我是新来的，如果我一开始没有提供您想要的所有信息，我很抱歉，我不习惯 post 问题，对不起我糟糕的英语...

我正在创建一个包含 2 个玩家列表的组件，用子组件“PlayersList”表示：将要玩的玩家和正在等待玩的玩家。在等待列表中的每个玩家项目上，我创建一个按钮，将他推入播放列表：所以我想将他从等待列表（一个子组件）中删除并将他添加到播放列表（另一个子组件）

============================================= ============================

我的父组件（包含 2 个子列表）的重要内容：

constructor(){
        super();
        this.state = { tournament: {}, players:[],waitingPlayers:[],id: window.location.pathname.split('/')[2]};
        this.parentSetState = this.parentSetState.bind(this);
    }

    //My function called in childs to update the state of player/waiting player list in the parent
    parentSetState(players,waitingPlayers){
        console.log("PARENT SET STATE ===");
        console.log(players);
        console.log(waitingPlayers);
        this.setState({players:players,waitingPlayers:waitingPlayers});
    }

    //I get the list of players and waitingplayers in an object given by getTournaments
    componentDidMount() {
        getTournaments({_id:this.state.id}).then(res => this.setState({ tournament: res[0],players:res[0].players, waitingPlayers:res[0].waitingPlayers}));
    }

以及如何在其渲染中创建列表：

//List of players that will play
<PlayerList waiting={false} tournament={this.state.tournament} players={this.state.players} waitingPlayers={this.state.waitingPlayers} update={this.parentSetState}/>

//List of players that are waiting
<PlayerList waiting={true} tournament={this.state.tournament} players={this.state.players} waitingPlayers={this.state.waitingPlayers} update={this.parentSetState}/>

============================================= ============================

现在在子“PlayerList”中：

constructor(){
        super();
        this.state = {
            tournament:[],
            waiting:false,
            players:[],
            waitingPlayers:[]
        };
}
componentDidMount(){
  this.setState({
    tournament:this.props.tournament,
    waiting:this.props.waiting,
    players:this.props.players,
    waitingPlayers:this.props.waitingPlayers
  });
}

然后对于列表中的每个玩家，如果 this.props.waiting == true（此列表是等待列表），我创建一个按钮，当我单击该按钮时，我使用以下方法：

var newPlayers=[...this.state.players];
var newWaitingPlayers=[...this.state.waitingPlayers];
newPlayers.push(group);//"group" is the player I push to the player list and splice from the waiting list
newWaitingPlayers.splice(newWaitingPlayers.indexOf(group));
this.props.update(newPlayers,newWaitingPlayers);

我的问题是，在调用此方法后，它会在包含 2 个列表的父级中调用 parentSetState()，我进行了测试，并使用良好的更新列表调用了该函数，它调用 this.setState () 在父级中更新 this.state.players 和 this.state.waitingPlayers 在父级中，在父级玩家和等待玩家的 render() 开始时更新但在子级的 render() 中它不是' t...

非常感谢帮助我！

Answer 1

好的，我找到了答案！问题是我在我的 child 中使用 this.state 而不是 this.props，所以当我更新 parent 组件中给出的道具时，它没有更新child !

ReactJs，this.setState 没有像我预期的那样工作

ReactJs, this.setState not working as I expect it to do

javascript

this

node.js

setstate

reactjs