ReactJs，this.setState 没有像我期望的那样工作答案

【问题标题】：ReactJs, this.setState not working as I expect it to doReactJs，this.setState 没有像我期望的那样工作
【发布时间】：2021-03-18 17:10:32
【问题描述】：

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

我正在创建一个包含 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.state.players 和 this.state.waitingPlayers，在父级玩家的 render() 开始时，waitingplayers 被更新，但在子级的 render() 中它不是......

非常感谢帮助我！

【问题讨论】：

标签： javascript node.js reactjs this setstate

【解决方案1】：

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

【讨论】：