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

Posted 2023-02-15

【中文标题】如何在 React 中创建动态变量名？

【英文标题】：How do I create a dynamic variable name in React?

【发布时间】：2018-05-01 14:58:14

【问题描述】：

在 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.

【参考方案1】：

像这样使用[]括号

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

【讨论】：

那我如何动态调用它呢？ this.state.["level" + (selectedItem.Level+1)]怎么会这样？

@ShadyHakim 你可以像this.state["level" + (selectedItem.Level+1)]一样动态调用它

【参考方案2】：

Prakash 的解决方案在 EcmaScript 版本足够先进的情况下有效。

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

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

【讨论】：

感谢罗伯特的快速回复！我选择了 Prakash 的回答以使用更少的代码行。我正在使用最新的 EcmaScript 版本。

【参考方案3】：

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

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