React函数组件中movies.map解析错误及movie参数类型优化问询

1. 「parsing error ',' expected」报错修复 #

报错核心原因 #

你在组件return语句中直接用{}包裹map逻辑，没有外层JSX根节点：JSX解析规则下，没有被标签包裹的{}会被识别为普通JavaScript对象字面量声明，解析器会期望对象内部出现键值对分隔的逗号，因此触发语法报错。

其他关联问题 #

• 导入了未使用的map方法来自react-bootstrap/ElementChildren，属于冗余代码可直接删除
• 函数组件参数写法错误：React函数组件第一个参数永远是props对象，你当前的写法会导致第二个、第三个参数永远为undefined，需要改成对象解构写法
• fetch请求直接写在组件顶层，组件每次重渲染都会触发重复请求，需要迁移到useEffect钩子中限制触发时机

2. movie参数类型优化方案 #

你当前用的内联匿名类型写法可读性差、无法复用，优化逻辑如下：

• 提前定义Movie接口，明确每个字段的具体类型，避免使用any
• 给useState的movies状态声明类型，TypeScript可以自动推断map遍历时的movie类型，无需在map回调中重复声明

修复后完整代码 #

import { useState, useEffect } from "react";
import PosterTag from "./PosterTag";

// 提前定义Movie类型，可全局复用
interface Movie {
  id: number;
  poster_path: string;
  title: string;
  // 其他需要用到的电影字段可在这里补充
}

// 组件参数改为props解构
function MovieTag({ genreId = 0, sortBy = "popularity.desc", page = 1 }: {
  genreId?: number;
  sortBy?: string;
  page?: number;
}) {
  // 给movies状态明确类型
  const [movies, setMovies] = useState<Movie[]>([]);
  const baseUrl = "https://api.themoviedb.org/3/discover/movie?api_key=My_Key" +
      "&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_watch_monetization_types=flatrate"

  // 请求放在useEffect中，仅当genreId变化时触发
  useEffect(() => {
    if(genreId === 0) {
      fetch(baseUrl).then(response => {
        return response.json();
      }).then(data => {
        setMovies(data.results as Movie[]);
      });
    }
  }, [genreId])

  return (
    // 外层加空标签Fragment作为根节点，不会生成多余DOM
    <>
      {movies.map((movie) => {
        return (
          <PosterTag key={movie.id}
                     poster={movie.poster_path}
                     title={movie.title}
          />
        );
      })}
    </>
  );
}
export default MovieTag

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