反应钩子无法读取未定义的属性映射答案

【问题标题】：react hooks cannot read property map of undefined反应钩子无法读取未定义的属性映射
【发布时间】：2023-03-13 00:59:01
【问题描述】：

我正在开发电影列表搜索应用程序，稍后可能会尝试添加延迟加载。这仅用于 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，即使它是一个数组。

【问题讨论】：

如果你使用promise，那么你不需要将回调函数传递给PageOneApi函数；您可以从PageOneApi 函数返回承诺，并将then() 和catch() 方法调用链接到函数调用。
Here's a simplified version of your code

标签： arrays reactjs react-hooks iterable

【解决方案1】：

由于pageOneData 最初是一个空对象，pageOneData.contentItems 将在第一个渲染周期中未定义。导致 movieList.map 失败，因为您的 useEffect 调用是在初始渲染之后进行的，并且会触发一个 API，该 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>

【讨论】：

【解决方案2】：

最初pageOneData 是空白对象，所以pageOneData.contentItems 将返回未定义，所以在第一次渲染时，react 会抛出错误。

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

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

【讨论】：