反应钩子无法读取未定义的属性映射 [英] react hooks cannot read property map of undefined

问题描述

我正在开发一个电影列表搜索应用程序，然后可能会尝试添加延迟加载.这仅用于 POC 目的.稍后可能会将其添加到我的投资组合中.

因此，我首先创建了一个全局 api.js，我将在其中放置带有回调的 API 调用，然后使用来自组件的回调调用 API.

 const PageOneApi = (callback, errorCallback) =>{axios(https://run.mocky.io/v3/36e4f9ce-2e48-4d44-9cf8-57f6900f8e12").then((响应) => {console.log(来自第一页 api 的响应"，响应);回调(响应)；}).catch((错误) => {console.log(来自第一页 api 的错误", err);错误回调(错误)；});};导出 const movieListApi = {PageOneApi，};

我有一个 movieList 组件:

function MovieList() {const [pageOneData, setPageOneData] = useState({});useEffect(async() => {等待 movieListApi.PageOneApi((res) =>{const pageOneData = res.data.page;setPageOneData(pageOneData);console.log("第一页数据:", pageOneData);},(错误) =>{控制台日志(错误)；});}, []);const movieList = pageOneData.contentItems;控制台日志(电影列表)；返回 (<div><h4 className="text-white p-5">{pageOneData.title}</h4><div className="grid grid-flow-row grid-cols-3 grid-rows-3 gap-7 m-5">{movieList.map((movie) => {控制台日志(电影"，电影)；})}

);}

现在，问题是我无法遍历 movieList，即使它是一个数组.

解决方案

由于 pageOneData 最初是一个空对象，pageOneData.contentItems 将在第一个渲染周期中未定义.导致 movieList.map 失败，因为您的 useEffect 调用是在初始渲染之后进行的，并且会触发一个再次异步的 API，并且需要时间来获取结果

您可以使用movieList的默认值来解决错误

const movieList = pageOneData.contentItems ||[];

或

可选链 (?.)

 
{movieList?.map((movie) => {控制台日志(电影"，电影)；})}

I am working on a movie list search app and then later might try to add lazy loading. This is just for POC purpose. Might add it to my portfolio later.

So, I have first created a global api.js where I will put the API calls with a callback and then call an API using callbacks from the components.

    const PageOneApi = (callback, errorCallback) => {
      axios("https://run.mocky.io/v3/36e4f9ce-2e48-4d44-9cf8-57f6900f8e12")
        .then((response) => {
          console.log("response from page one api", response);
          callback(response);
        })
        .catch((err) => {
          console.log("error from page one api", err);
          errorCallback(err);
        });
    };

export const movieListApi = {
  PageOneApi,
};

I have a movieList component:

function MovieList() {
  const [pageOneData, setPageOneData] = useState({});

  useEffect(async () => {
    await movieListApi.PageOneApi(
      (res) => {
        const pageOneData = res.data.page;
        setPageOneData(pageOneData);
        console.log("page one data: ", pageOneData);
      },
      (err) => {
        console.log(err);
      }
    );
  }, []);

  const movieList = pageOneData.contentItems;
  console.log(movieList);

  return (
    <div>
      <h4 className="text-white p-5">{pageOneData.title}</h4>
      <div className="grid grid-flow-row grid-cols-3 grid-rows-3 gap-7 m-5">
        {movieList.map((movie) => {
          console.log("movie", movie);
        })}
      </div>
    </div>
  );
}

Now, the problem is that I am unable to iterate through movieList, even though it's an array.

解决方案

Since pageOneData is initially an empty object, pageOneData.contentItems will be undefined in the first render cycle. causing movieList.map to fail as your useEffect call is made after the initial render and that fires an API which again is async and will take time to fetch the result

You can use default value for movieList to solve the error

const movieList = pageOneData.contentItems || [];

or

Optional chaining (?.)

 <div className="grid grid-flow-row grid-cols-3 grid-rows-3 gap-7 m-5">
    {movieList?.map((movie) => {
      console.log("movie", movie);
    })}
  </div>

这篇关于反应钩子无法读取未定义的属性映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！