React中useState的值能否用于对象属性的动态访问？

当然可以实现你要的效果，核心是用JavaScript的方括号属性访问语法替代点语法——点语法只能用固定的字面量属性名，而方括号里可以放变量、表达式，刚好适配你用useState存储动态类型的场景。

具体代码示例 #

1. 声明状态存储选中的类型：

const [selectedGenre, setSelectedGenre] = useState("drama");

2. 绑定下拉选择框的事件，更新状态：

<select 
  value={selectedGenre} 
  onChange={(e) => setSelectedGenre(e.target.value)}
>
  {/* 假设genreOptions是你的类型数组，比如["drama", "comedy", "action"] */}
  {genreOptions.map(genre => (
    <option key={genre} value={genre}>{genre}</option>
  ))}
</select>

3. 动态判断电影类型：

// 当selectedGenre为"drama"时，这行和movies[0].drama完全等价
console.log(movies[0][selectedGenre]);

额外提示 #

• 只要useState里的字符串和电影对象的属性名完全匹配，就能精准拿到对应0/1的值；
• 如果担心属性名不存在导致返回undefined，可以加个默认值兜底：movies[0][selectedGenre] ?? 0

内容的提问来源于stack exchange，提问作者Marcus