页面刷新后调用Pexels API返回undefined的问题求助

问题原因 #

1. Redux初始状态类型不匹配：你的imageSlice.js里初始状态images设为了空数组[]，但Pexels API返回的是包含photos数组的对象（结构类似{ photos: [...], total_results: ... }）。刷新页面时，组件首次渲染异步请求还未完成，此时state.images.images是初始的空数组，解构photos会得到undefined，对undefined调用map就会触发报错。
2. 首次编写代码时可能存在缓存或数据提前加载的情况，掩盖了初始状态不匹配的问题，刷新后数据需重新请求，问题就暴露出来了。

解决方案 #

以下几种方式任选其一即可：

1. 修正Redux初始状态结构 #

在imageSlice.js中，将初始状态的images改为和API返回结构一致的对象，确保初始时photos是空数组：

const initialState = {
  images: { photos: [] }, // 替换原来的空数组[]
  error: null,
  isLoading: false,
};

2. 利用加载状态控制渲染 #

在Images.jsx中通过isLoading状态，在数据加载完成前不执行map操作：

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchImages } from '../redux/imageSlice';
import Image from './Image';

const Images = () => {
  const { photos } = useSelector(state => state.images.images);
  const { isLoading } = useSelector(state => state.images);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchImages());
  }, []);

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

  return (
    <div className="container">
      <h2>Images</h2>
      {photos?.map(photo => (
        <Image key={photo.id} image={photo} />
      ))}
    </div>
  );
};

export default Images;

3. 解构时给photos设置默认值 #

在Images.jsx中解构photos时，添加空数组作为默认值，避免出现undefined：

const { photos = [] } = useSelector(state => state.images.images);

额外优化建议 #

在Image.jsx中使用可选链操作符，进一步避免数据未完全加载时的报错：

import React from 'react';

const Image = props => {
  return (
    <div>
      <div className="row">
        <div className="col">
          <img src={props.image?.src?.medium} alt={props.image?.alt || '图片'} />
        </div>
      </div>
    </div>
  );
};

export default Image;

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