React中访问对象内常量对象数组调用map方法遍历报错如何解决

你定义movies对象的方式是完全合规的，报错是以下两个核心问题导致的：

1. 变量访问语法错误 #

你写的movies["genreSelect"]是尝试从movies对象里取名为"genreSelect"的固定属性，但你实际要取的是genreSelect这个state变量对应的值的属性，去掉引号即可，正确写法为movies[genreSelect]。

2. 初始状态无值导致调用map报错 #

你的genreSelect初始值是空字符串，首次渲染时movies[genreSelect]是undefined，直接调用.map()自然会抛出类型错误。需要加条件判断，只有选中有效分类时才渲染列表。

其他优化点 #

React中指定DOM类名需要用className属性而不是class，否则会触发React属性不匹配的警告；使用map渲染列表时需要给子元素加唯一key属性，避免列表渲染警告。

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 = {
  "Drama" : drama,
  "Comedy": comedy,
  "Science": science
}; 

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

function clickHandler(x) {
  setgenreSelect(x);
}

return (
  <div className="App">
    <div className="container">
      <h1>My Movie List</h1>
      <h3> 点击分类查看我最喜欢的电影</h3>
    </div>
    <nav className="navDiv">
      {movieList.map((genre, index)=>{
        return(
          <button className="btn" key={index} onClick={() => clickHandler(genre)}>{genre}</button>
        );        
      })}
    </nav>
    <ul className="list-nonbullet">
      {/* 只有genreSelect有有效值时才渲染对应电影列表 */}
      {genreSelect && movies[genreSelect].map((movie, index)=>(   
        <li className="listDiv" key={index}>
          <div>{movie.name}</div>
          <div>{movie.rating}</div>
      </li> 
      ))}        
    </ul>
  </div>
);

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