Wie erstelle ich einen dynamischen Variablennamen in React?

Question

In React versuche ich dynamisch meinen Status Variablennamen mit einer Variablen und statischen Text zu erstellen. 'level2' wird durch 'level' Text plus eine Variable erzeugt, die angibt, welche Ebene (selectedItem.Level + 1).

Wenn ein Benutzer auf eine Stadt klickt, bevölke ich ein Array aller Gemeinden innerhalb der Stadt und so weiter. Durch Requisiten weiß ich, auf welches Level geklickt wurde. Ich möchte dynamisch erstellen, welche Statusvariable aktualisiert werden soll.

"FilteredListFromClick" ist ein Array von Kindern basierend auf welchem ​​Elternteil geklickt wurde.

this.setState({level2: FilteredListFromClick}) // hard coding name works, level2 is populated with a list of townships in clicked city. 

var levelName = "level" + selectedItem.Level+1; // column1, column2, etc 
this.setState({levelName: FilteredListFromClick}) // does not work, state is not updated, results are an empty list 

this.setState({"level"{selectedItem.Level+1}: FilteredListFromClick}) // syntax errors - I've tried playing around with different combos of(), {}, "", and so on. Ideally I would like to set my state in one line like this. 

Answer 1

Verwenden [] Klammern ähnliche

this.setState({["level" + (selectedItem.Level+1)]: FilteredListFromClick}) 

Answer 2

Prakash Lösung funktioniert eine erweiterte genug EcmaScript Version gegeben.

Ein älterer Stil und (IMHO) leicht lesbare Lösung ist die Karte außerhalb und gibt sie in bauen.

const newState = {} 
newState["level" + selectedItem.Level+1] = FilteredListFromClick 
this.setState(newState)