Reactjs 映射函数出错：无法读取'；地图'；未定义

在使用map函数时，我浏览了每个文档，但也复制了与github上实际运行但无法在本地服务器上运行的代码完全相同的代码。它总是在说同样的问题，因为映射函数定义不清

请获取我在项目中使用的以下代码

import React, { useState, useEffect } from "react";
import axios from "./axios";
import "./Row.css";
import Youtube from "react-youtube";

const baseImgUrl = "https://image.tmdb.org/t/p/original";

function Row({ title, fetchUrl, isLargeRow }) {
  const [movies, setMovies] = useState([]);
  const [trailerUrl, setTrailerUrl] = useState("");

  // Options for react-youtube
  const opts = {
    height: "390",
    width: "100%",
    playerVars: {
      autoplay: 1,
    },
  };

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

  const handleClick = async (movie) => {
    if (trailerUrl) {
      setTrailerUrl("");
    } else {
      let trailerurl = await axios.get(
        `/movie/${movie.id}/videos?api_key=somekeyhere`
      );
      setTrailerUrl(trailerurl.data.results[0]?.key);
    }
  };

  return (
    <div className="row">
      <h2>{title}</h2>

      <div className="row_posters">
        {movies.map(
          (movie) =>
            movie.backdrop_path !== null && (
              <img
                className={`row_poster ${isLargeRow && "row_posterLarge"}`}
                src={`${baseImgUrl}${
                  isLargeRow ? movie.poster_path : movie.backdrop_path
                }`}
                alt={movie.name}
                key={movie.id}
                onClick={() => handleClick(movie)}
              />
            )
        )}
      </div>
      {trailerUrl && <Youtube videoId={trailerUrl} opts={opts} />}
    </div>
  );
}

export default Row

import React，{useState，useffect}来自“React”；
从“/axios”导入axios；
导入“/Row.css”；
从“react Youtube”导入Youtube；
常量baseImgUrl=”https://image.tmdb.org/t/p/original";
函数行（{title，fetchUrl，isLargeRow}）{
const[movies，setMovies]=useState（[]）；
const[trailerUrl，setTrailerUrl]=useState（“”）；
//反应youtube的选项
常量选项={
高度：“390”，
宽度：“100%”，
playerVars：{
自动播放：1，
},
};
useffect（（）=>{
异步函数fetchData（）{
const request=wait axios.get（fetchUrl）；
setMovies（请求、数据、结果）；
返回请求；
}
fetchData（）；
}，[fetchUrl]）；
const handleClick=async（电影）=>{
if（trailerUrl）{
setTrailerUrl（“”）；
}否则{
让trailerurl=等待axios.get(
`/movie/${movie.id}/videos？api_key=somekeyhere`
);
setTrailerUrl（trailerurl.data.results[0]？.key）；
}
};
返回(
{title}
{movies.map(
（电影）=>
movie.background_path！==null&&(
handleClick（电影）}
/>
)
)}
{trailerUrl&&}
);
}
导出默认行

即使您使用

useState

将电影的[]设置为初始状态，它将由您请求的响应重新分配。

---

确保

request.data.results

不是未定义的

它不是说

map

是未定义的，而是说你在调用

map

，处理未定义的东西。因此，您需要调试

电影

未定义的原因。