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

Answer 2

我认为您必须将新数组传递到setState中的handleAddPlayerButtonClick()来电，请尝试以下操作：

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

如何在React中的事件上调用setState之后重新呈现嵌套组件

2 个答案: