访问作为常量赋值的对象数组，并映射其值

Question

/*如果我需要一个数组来映射类型的值，如下面的数据(戏剧/喜剧/科学)使用映射函数，如何访问它。我的代码抛出了一个错误。在React JS中编码/

我确实实现了用对象数组直接在对象中定义数据结构的结果。但是为什么map不能用这个代码访问数组呢?

const drama = [
{name: "So {Long, My Son",
rating: "5/5"},
{name: "Schindlers List",
rating: "4.5/5"},
]
const comedy = [{
name: "Snatch",
rating: "4/5"},
{name: "Two Barrels",
rating: "4/5"}
];
const science = [
{name: "Interstellar",
rating: "4/5"},
{name: "ET",
rating: "4/5"}
];
const movies = {     /** Can I even define like this*/
"Drama" : drama,
"Comedy": comedy,
"Science": science
}; 

var [genreSelect, setgenreSelect] = useState("");
var movieList = Object.keys(movies);

function clickHandler(x) {
setgenreSelect(x);
}
return (
<div className="App">
<div class="container">
<h1>My Movie List</h1>
<h3> Hit on the genres to check out my favourite movies</h3>
</div>
<nav class="navDiv">
{movieList.map((genre)=>{
return(
<button class="btn" onClick={() => clickHandler(genre)}>{genre}</button>
);        
})}
</nav>
<ul class="list-nonbullet">
**/**-->> The part down  below throws an error. I have tried to access object[property] the value being an array defined */**
{movies["genreSelect"].map((movie)=>(   
<li class="listDiv">
<div>{movie.name}</div>
<div>{movie.rating}</div>
</li> 
))}        
</ul>
</div>
);
}

Answer 1

为什么在这一行使用双引号{movies["genreSelect"].map((movie)=>(

)应该是这样的{movies[genreSelect].map((movie)=>(

)