onClickで配列に追加するために.pushを有効に使用

Question

私は、私の親にインポートされた外部ファイル "players.js"である、プレーヤーと呼ばれる既存の配列に追加しようとしています。

players.push({ 
    name: 'Maul', 
    id: 26 
}); 

をそしてIDをキーに使用され、名前が配列で更新されるように、その作品：

私は書くことができます。次のように

私は

handleAddPlayer =() => { 
    console.log('i am working'); 
    players.push({ 
     name: 'Maul', 
     id: 26 
    }); 
    }; 

そして、私のボタンを作成する場合は、私は

<div> 
     <h4>Add A Player</h4> 
     <input /> 
     <button onClick={this.handleAddPlayer}>Press to Add Player</button> 
    </div> 

そして、私の状態を持っているのです。

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

それは動作しません。

ここから私は2つの質問がある：

1. は、私はボタンをクリックしたときに、なぜそれが更新されませんが、関数として前にいない作品？

は 私は、入力に名前を入れて、私の配列に加え、独自のキーを生成したい

2. は私がCONCATENATEを試してみましたが、多くの成功をない持っていた

players.js。

Answer 1

プレーヤー状態オブジェクトのプロパティですので、あなたは、プロパティを更新するSETSTATEを呼び出すことになるでしょう：

handleAddPlayer =() => { 
    // create a clone of your array of players; don't modify objects on the state directly 
    const players = this.state.players.slice(0); 

    players.push({ 
    name: 'Maul', 
    id: 26 
    }); 

    this.setState({ 
    players: players, 
    }); 
};