我如何在 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})

Answer 2

Prakash 的解决方案在足够高级的 EcmaScript 版本下有效。

一种较老式且（恕我直言）可读性稍强的解决方案是在外部构建地图并将其传入。

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

Answer 3

一个小的调整将此答案更新为更新的方法：

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

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

How do I create a dynamic variable name in React?

variables

jsx

setstate

reactjs