Javascript-Einsatz in React setState

Question

Ich studiere ein Buch reagieren, sondern ein einfaches so sehen, aber ich weiß nicht, warum es liegt ‚‘ hinter der [item]:value]

handleChange(item ,e) { 
    const {value} = e.target; 
    this.setState({[item]:value,}); 
} 

render() { 
    const {name, age} = this.state; 
    return (
     <div className="FormA"> 
      name: <input value={name} onChange={this.handleChange.bind(this,'name')}/> 
      age: <input value={age} onChange={this.handleChange.bind(this,'age')}/> 
     </div> 
    ); 
} 

Answer 1

Es gilt als beste übe ein "," nach jeder Objekteigenschaft. Sie müssen ESLint verwendet haben:

Es ist nur eine Frage der Syntax und fügt nichts zu Ihrem Code hinzu.

Answer 2

Dies liegt daran, dass Sie eine Sammlung von benannten Werten definieren können, die festgelegt werden sollen. Wenn Sie nur einen festlegen möchten, müssen Sie ihn nicht verwenden. In gleicher Weise umfasst nicht das letzte Element braucht es weder zum Beispiel:

this.setState({[item]:value}); //You don't necessary need the ',' here. 

this.setState({ 
[item]:value,  //here you need to use ',' 
[item2]:value2, //here you need to use ',' 
[item3]:value3}); //here you don't need to use ',' 

Weitere Informa über Objekte überprüfen this link und this one

Answer 3

Es ist eine bewährte Methode, weil die folgenden Gründe

1. Es ist einfacher, die Kommas zu verfolgen. Z.B. Wenn Sie eine lange Liste von Objekteigenschaften haben möchten und einige von ihnen auskommentieren möchten, müssen Sie sich nicht um Comas kümmern, da diese ebenfalls kommentiert werden. Dasselbe gilt für Kopieren und Einfügen.
2. Es ist einfacher, die Diffs in der Versionskontrolle zu sehen.

Die Kommata können entweder am Ende oder an der Vorderseite sein. [Ich verwende in der Regel auf der Vorderseite, persönliche Wahl.]

von ESList Anführungsstrich Regeln

Die Comma Stil Regel Stile für kommagetrennte Listen erzwingt. Es gibt zwei Kommas Arten in erster Linie in JavaScript verwendet:

Der Standard-Stil, in dem Komma am Ende der aktuellen Zeile

Comma Erster Stil gesetzt werden, bei dem Komma am Anfang der nächsten Zeile platziert

Eine der Rechtfertigungen für die Verwendung von Komma First-Stil ist, dass es helfen kann, fehlende und nachgestellte Kommas zu verfolgen. Diese sind problematisch, da fehlende Kommas in Variablendeklarationen zum Verlust globaler Variablen führen können und nachgestellte Kommas in älteren IE-Versionen zu Fehlern führen können.

Siehe:

https://eslint.org/docs/rules/comma-dangle,

https://medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8,

https://eslint.org/docs/rules/comma-style