Wie man eine verschachtelte Komponente neu rendert, nachdem setState aufgerufen wird, ist das Ereignis in React

Question

Ich habe eine Komponente namens GameSetup, die im Grunde nur ein Formular ist, das Benutzer ausfüllen können. Innerhalb der GameSetup-Komponente rufe ich eine andere Komponente namens PlayerList auf, die eine Liste von Spielern in einer HTML-Liste (Liste von Strings) anzeigt.

Auf dem GameSetup-Formular gibt es ein Textfeld, das es einem Benutzer ermöglicht, einen neuen Spielernamen einzugeben und dann auf die Schaltfläche zu klicken, um den Benutzer dem Spiel hinzuzufügen. Ich habe ein Button-Click-Ereignis auf der Spieler hinzufügen-Schaltfläche und ich aktualisiere den Zustand, der ein Array von Strings enthält, die alle Spieler enthält (Liste der Strings). Wenn ich einen neuen Player hinzufüge, erwarte ich, dass der Player von der PlayerList-Komponente angezeigt wird, aber nicht mit der richtigen Liste wiedergegeben wird, befindet er sich immer noch im Initialisierungszustand oder wird nicht neu gerendert.

Was muss ich tun, um das Update der PlayerList-Komponente zu erhalten, wenn ein neuer Player zur Liste hinzugefügt wird? meine GameSetup Komponente

hier:

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> 
     ); 
    } 
} 

Hier ist meine Spieler Komponente:

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> 
     ); 
    } 
} 

Hier ist PlayerlistRow Komponente:

import React from 'react'; 

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

Hier ist ein Beispiel dafür, was dem Bildschirm sieht so aus:

Answer 1

Der Grund, warum es Ihnen, die Spieler zeigen tut, bc Sie Zustand mutieren (Array.prototype.push) . Sie können Array.prototype.concat Methode verwenden. Statt vorhandenen Array mutiert es neue Array zurück, die Sie benötigen

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

HTH

Answer 2

Ich glaube, Sie in handleAddPlayerButtonClick() ein neues Array zu Ihrem setState Aufruf passieren müssen, versuchen Sie dies:

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