如何在React中创建动态变量名？

Question

在React中，我试图使用变量和静态文本来动态创建状态变量名称。“ level2”将由“ level”文本加上表示什么级别的变量（selectedItem.Level + 1）创建。

this.state={
  level1:[""], // city
  level2:[""]  // township
  level3:[""]  // neighborhood 
  level4:[""]  // street
}

当用户单击某个城市时，我将填充该城市中所有城镇的阵列，依此类推。通过道具，我知道单击了哪个级别。我想动态创建要更新的状态变量。

“ FilteredListFromClick”是基于单击父对象的子级数组。

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

使用这样的[]括号

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