反应挂钩无法读取属性未定义的地图

Question

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

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

    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,
};

我有一个 movieList 组件：

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>
  );
}

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

Answer 1

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

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

const movieList = pageOneData.contentItems || [];

或

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>

Answer 2

最初 pageOneData 是空白对象，所以 pageOneData.contentItems 将 return 未定义，所以首先渲染反应会抛出错误。

要解决这个问题，您可以使用 optional chaining 所以请尝试以下操作：-

{movieList?.map((movie) => {
          console.log("movie", movie);
        })}

反应挂钩无法读取属性未定义的地图

react hooks cannot read property map of undefined

arrays

reactjs

react-hooks

iterable

反应挂钩无法读取 属性 未定义的地图

react hooks cannot read property map of undefined

arrays

reactjs

react-hooks

iterable

反应挂钩无法读取属性未定义的地图