reactjs - 如何在 React 中的事件调用 setState 后重新渲染嵌套组件

Question

我有一个名为 GameSetup 的组件，它基本上只是一个用户可以填写的表单。在 GameSetup 组件中，我正在调用另一个名为 PlayerList 的组件，它在 html 列表(字符串列表)中显示玩家列表。

在 GameSetup 表单上有一个文本框，允许用户输入新的玩家名称，然后单击按钮将用户添加到游戏中。我在添加玩家按钮上有一个按钮单击事件，我更新了状态，其中包含一个包含所有玩家的字符串数组(字符串列表)。当我添加一个新播放器时，我希望播放器从 PlayerList 组件中显示出来，但它没有使用正确的列表重新渲染，它仍处于初始状态，或者没有被重新渲染。

当新玩家添加到列表时，我需要做什么来更新 PlayerList 组件？

这是我的 GameSetup 组件:

import React from 'react';
import PlayerList from 'components/playerlist/playerlist';

export default class GameSetup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {localmode: true, players: ["test"], buyIn: 0.00, playerName: ""};

        this.handleAddPlayerButtonClick = this.handleAddPlayerButtonClick.bind(this);
        this.handlePlayerNameChange = this.handlePlayerNameChange.bind(this);
    }

    handleAddPlayerButtonClick(event) {
        this.setState({
            players: this.state.players.push(this.state.playerName)
        });
    }

    handlePlayerNameChange(event) {
        this.setState({
            playerName: event.target.value
        });
    }

    render() {
        return (
            <div>
                <div className="col-lg-6">
                    <form>
                        <h2>General Game Settings</h2>
                        <hr />
                        <div className="form-group">
                            <input type="text" placeholder="Name of Game" className="form-control" />
                        </div>
                        <div className="form-group">
                            <input type="text" placeholder="Buy In" className="form-control" />
                        </div>
                        <br/>
                        <h2>Players</h2>
                        <hr />
                        <div className="form-group">
                            <input type="text" value={this.state.playerName} className="form-control" placeholder="Player Name" onChange={this.handlePlayerNameChange} />
                        </div>

                        <button className="btn btn-success" onClick={this.handleAddPlayerButtonClick}>Add Player</button>
                        <PlayerList players={this.state.players} />
                    </form>
                </div>
                <div className="col-lg-6">
                    <h2>Game Details</h2>
                    <hr/>
                </div>
            </div>
        );
    }
}

这是我的 PlayerList 组件:

import _ from 'lodash';
import React from 'react';
import PlayerListRow from './playerlistrow';

export default class PlayerList extends React.Component {
    render() {
        var rows = [];
        this.props.players.forEach(function(player){
            rows.push(<PlayerListRow player={player} key={player.Id} />);
        });

        return (
            <ul>{rows}</ul>
        );
    }
}

这是 PlayerlistRow 组件:

import React from 'react';

export default class PlayerListRow extends React.Component {
    render() {
        return (
            <li>{this.props.player}</li>
        );
    }
}

以下是屏幕外观示例:

Answer 1

它不显示玩家的原因是因为你改变了状态(Array.prototype.push)。您可以使用 Array.prototype.concat方法。它不会改变现有数组，而是返回您需要的新数组

handleAddPlayerButtonClick(event) {
  this.setState({
    players: this.state.players.concat([this.state.playerName])
  });
}

HTH