新しいアイテムが追加されたときに、アレイの総カウント状態を更新します。

Question

"プレイヤー"を追加できるアレイがあります。私はまたの合計数を与える配列を見てプレーヤーの総数を持っています。それは動作しますが、新しい項目を考慮しません。

私は配列（プレーヤー）の新しい更新状態を渡す必要があることを知っていますが、私はそれを行う方法に固執しています。

配列

handleChange = e => { 
    this.setState({ 
     newPlayerName: e.target.value 
    }); 
    }; 

    handleAddPlayer = e => { 
    this.setState(prevState => ({ 
     players: [ 
     ...prevState.players, 
     { 
      name: this.state.newPlayerName, 
      id: getRandomInt(20, 155) 
     } 
     ] 
    })); 
    }; 

私の状態

に追加する

アレイ

const players = [ 
    { 
    name: 'Jabba', 
    score: 10, 
    id: 11 
    }, 
    { 
    name: 'Han', 
    id: 1 
    }, 

{ 
    name: 'Luke', 
    id: 2 
    }, 

機能を次のように私は私のコードの切れ端を提供してきました0

this.state = { id: players.id, totalScore: 0, totalPlayers: players, countInfo: [], evilName: '', color: '#6E68C5', scoreColor: '#74D8FF', fontAwe: 'score-icon', incrementcolor: '', scoreNameColor: 'white', glow: '', buttonStyle: 'count-button-start', newPlayerName: '', max_chars: 15, chars_left: '', players }; 

そして、私はつまずいているように見えたところ最終的に合計を更新する必要がありますが、機能しないのとどこがこだわっている

function Stats(props) { 
    const totalPlayers = props.players.length; 
    const totalScore = props.players.reduce(
    function(total, player) { 
     return props.totalScore + props.totalScore; 
    }, 
    0 
); 
    return (
    <div style={{ width: '100%' }}> 
     <PlayerNumb>Number of players: <b>{totalPlayers}</b></PlayerNumb> 
    </div> 
); 
} 

const totalPlayers = props.players.length;です。 Reactがまだ私にとって新しいものであるとして私が混乱している情報を与えたなら、どんな助けも大いに評価され、謝罪するでしょう。

また、私は統計と呼ばれる方法の例：

 <Stats 
     style={{ width: '100%' }} 
     totalScore={this.state.totalScore} 
     players={players} 
     /> 

そして

render() { 
    const listPlayers = this.state.players.map(player => (
     <Counter 
     key={player.id} 
     player={player} 
     playersArray={this.state.players} 
     name={player.name} 
     sortableGroupDecorator={this.sortableGroupDecorator} 
     decrementCountTotal={this.decrementCountTotal} 
     incrementCountTotal={this.incrementCountTotal} 
     removePlayer={this.removePlayer.bind(this)} //bind this to stay in the context of the parent component 
     handleClick={player} 
     /> 
    )); 

    return (
     <ContainLeft style={{ alignItems: 'center' }}> 
     <ProjectTitle>Score Keeper</ProjectTitle> 
     <Copy> 
      A sortable list of players that with adjustable scores. Warning, don't go negative! 
     </Copy> 
     <GroupHolder> 
      <Stats 
      style={{ width: '100%' }} 
      totalScore={this.state.totalScore} 
      players={players} 
      /> 
      <div 
      style={{ width: '100%' }} 
      className="container" 
      ref={this.sortableContainersDecorator} 
      > 
      <div className="group"> 
       <div className="group-list" ref={this.sortableGroupDecorator}> 
       {listPlayers} 
       </div> 
      </div> 
      </div> 
      <HandleForm> 
      <form 
       style={{ width: '100%' }} 
       onSubmit={this.handleClick.bind(this)} 
      > 
       <p className="sort-player">Add A Player</p> 
       <InputText 
       type="text" 
       maxLength="15" 
       max="4" 
       name="usr" 
       placeholder="Enter a new name" 
       value={this.state.newPlayerName} 
       onChange={this.handleChange} 
       /> 
       <PlayerButton onClick={this.handleAddPlayer}> 
       Press to Add Player 
       </PlayerButton> 
       <CharacterCount> 
       Characters left 
       {' '} 
       {this.state.max_chars - this.state.newPlayerName.length} 
       </CharacterCount> 
      </form> 
      </HandleForm> 
     </GroupHolder> 
     </ContainLeft> 
    ); 
    } 
} 

export default Container; 

Answer 1

を作成する方法プレーヤーの完全なレンダリングコードあなたがplayersと呼ばれる未定義の変数を使用してレンダリング機能を呼び出しています

players={players} 

this.state.playersを使用して定義するか、const players = this.state.players;

と入力してください。エディタ用のeslintプラグインを使用してローカルで開発する必要があります。これは、構文エラーとしてこれらの問題を強調し、時間を節約します。