使用自定义Hook获取数据后调用map出现未定义报错的咨询

你的推测完全正确——组件首次渲染时，useCreations返回的data是undefined，此时调用map就会触发报错。以下是几种简单有效的解决方法：

方法1：给useState设置初始空数组 #

在自定义Hook中，将useState的初始值设为空数组，确保初始返回的data始终是可遍历的数组类型：

const useCreations = () => {
  const service = new aboutPisanka();
  // 初始值设为空数组
  const [data, setData] = useState([]);

  useEffect(() => {
    service.getAllCreations().then((data) => setData(data));
  }, []);

  return data;
};

方法2：在组件中使用条件判断/可选链 #

如果不想修改Hook初始值，可以在组件中先判断data是否存在，再执行map，或者用可选链操作符?.规避报错：

const data = useCreations();
// 方法A：条件判断
const cards = data ? data.map((item) => {
  const { heading, text, id, image } = item;
  return (
    <div key={id}>
      <img src={require(image)}/>
      <h1>{heading}</h1>
      <p>{text}</p>
    </div>
  );
}) : null;

// 方法B：可选链操作符
const cards = data?.map((item) => {
  const { heading, text, id, image } = item;
  return (
    <div key={id}>
      <img src={require(image)}/>
      <h1>{heading}</h1>
      <p>{text}</p>
    </div>
  );
});

注意：把map的参数名从data改成item，避免和外层的data变量冲突，提升代码可读性。

方法3：添加加载状态（优化用户体验） #

如果异步请求耗时较长，可以在自定义Hook中增加加载状态，让组件在数据加载完成前显示加载提示：

const useCreations = () => {
  const service = new aboutPisanka();
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    service.getAllCreations()
      .then((data) => setData(data))
      .finally(() => setLoading(false));
  }, []);

  return { data, loading };
};

组件中使用：

const { data, loading } = useCreations();

if (loading) {
  return <div>加载中...</div>;
}

const cards = data.map((item) => {
  const { heading, text, id, image } = item;
  return (
    <div key={id}>
      <img src={require(image)}/>
      <h1>{heading}</h1>
      <p>{text}</p>
    </div>
  );
});

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