React Netflix克隆页面刷新后内容闪现并触发Map错误排查

我用ReactJS结合useEffect钩子开发Netflix克隆项目，当前代码能输出基础的Netflix影片名称与图片，但页面刷新后内容仅显示一秒，控制台随即出现Map相关错误，代码看起来没异常，请问错误原因是什么？

相关代码 #

Row.js:

function Row({ fetchUrl, title }) {
  const baseURL = "https://image.tmdb.org/t/p/original/"
  const [movies, setMovies] = useState([])

  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(fetchUrl)
      setMovies(request.data.results)
      return request
    }
    fetchData()
  }, [fetchUrl])

  return (
    <div className="row">
      <h2> {title} </h2>
      {movies.map((movie) => (
        <img src={`${baseURL}${movie.poster_path}`} alt={movie.name} />
      ))}
    </div>
  )
}

requests.js:

const API_KEY = "ecfc81ae98ad1c0720b07e83400de828"

const requests = {
  fetchTrending: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
  fetchNetflixOriginals: `discover/tv?api_key=${API_KEY}&with_networks=213`
}

axios.js:

const instance = axios.create({
    baseURL : "https://api.themoviedb.org/3",
});

app.js:

function App() {
  return (
    <div ClassName="App">
      <h1> Hey !! lets build Netflix</h1>
      <Row title="Netflix Originals" fetchUrl={requests.netflixOriginals} />
      <Row title="Trending" fetchUrl={requests.fetchTrending} />
    </div>
  )
}

错误截图 #

错误原因分析 #

• props键名拼写错误：App.js中第一个Row组件传入的fetchUrl={requests.netflixOriginals}是错误的，requests对象里对应的键是fetchNetflixOriginals，不是netflixOriginals。这会导致该Row的fetchUrl为undefined，axios请求失败后，setMovies可能被设置为非数组值（比如undefined），后续调用movies.map时就会抛出“Cannot read properties of undefined (reading 'map')”的错误。
• axios实例未正确使用：Row.js中直接使用了axios.get，但你在axios.js里创建了自定义的axios实例instance，应该导入这个实例并使用instance.get，否则请求的baseURL不匹配，会导致API请求失败，返回错误数据，使得movies状态变为非数组，触发map报错。
• 缺乏错误处理与边界判断：即使请求正常，也可能存在返回数据异常的情况，同时初始状态虽然是数组，但请求失败时可能被覆盖为非数组值。建议在map前添加可选链判断：{movies?.map(...)}，避免在非数组上调用map方法；同时在fetchData中添加try/catch捕获请求错误，防止错误扩散导致状态异常。

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