訪問在 object 中分配為常量的對象數組並映射其值

Question

/*如果我需要一個數組到 map 類型的值如下面的數據（戲劇/喜劇/科學）使用 map function，如何訪問它。 我的代碼拋出錯誤。 在 React JS 中編碼/

我確實實現了直接在 object 中用對象數組定義數據結構的結果。但是為什么沒有使用此代碼訪問 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)=>(