Reagieren verwenden .Push zu einem Array mit onClick hinzufügen

Question

Ich versuche, zu meinem vorhandenen Array, die Spieler genannt wird (das ist eine externe Datei "players.js", die in meine Eltern importiert wird) hinzufügen.

kann ich schreiben:

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

Und das funktioniert als ID für den Schlüssel verwendet wird, und der Name in dem Feld aktualisiert wird.

Allerdings, wenn ich schreibe

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

Und auf meinem Knopf habe ich

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

Und mein Zustand ist wie folgt:

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

Es funktioniert nicht.

Von hier habe ich zwei Fragen:

1. warum wird es nicht aktualisiert, wenn ich auf die Schaltfläche klicken, funktioniert aber vor nicht als Funktion?

2. Ich mag würde einen Namen in den Eingang setzen und einen eindeutigen Schlüssel zu generieren, die in meinem Array hinzugefügt wird, players.js

ich verketten habe versucht und hatte nicht viel Erfolg.

Answer 1

Spieler ist eine Eigenschaft auf dem Statusobjekt, so dass Sie wollen setState rufen Sie die Eigenschaft zu aktualisieren:

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