无法将Redux store中singleCard的src作为useState初始值展示图片如何解决

错误原因 #

1. React组件首次渲染的执行优先级高于useEffect回调，首次渲染时还未执行数据请求的dispatch逻辑，Redux存储中的singleCard初始值为空，直接访问singleCard.src会触发空属性读取错误。
2. 控制台能打印完整的singleCard对象是因为浏览器控制台打印引用类型数据时，展示的是对象最终更新后的值，并非首次渲染时的初始空值。
3. 你提交的productReducer代码存在粘贴错误，与action代码完全重复，正常的商品详情reducer初始状态中singleCard默认是空对象或null，进一步导致初始读取失败。

修复方案 #

1. 给useState设置安全初始值 #

使用可选链语法做空值判断，避免直接读取空对象属性：

const [currentImg, setcurrentimg] = useState(singleCard?.src || '');

如果运行环境不支持可选链，改为兼容性写法：

const [currentImg, setcurrentimg] = useState(singleCard && singleCard.src ? singleCard.src : '');

2. 监听singleCard变化同步本地状态 #

新增useEffect监听Redux返回的singleCard数据，请求成功后自动更新本地的图片状态：

useEffect(() => {
  if (singleCard?.src) {
    setcurrentimg(singleCard.src);
  }
}, [singleCard]);

3. 渲染前加状态兜底判断 #

在组件return前新增加载、错误、空数据的判断逻辑，避免异常渲染：

if (loading) return <div>商品加载中</div>;
if (error) return <div>加载失败：{error}</div>;
if (!singleCard) return <div>未查询到对应商品信息</div>;

4. 修正商品详情Reducer（必做） #

你当前粘贴的Reducer代码完全错误，替换为标准的Redux reducer写法，明确初始状态结构：

export const productDetailsReducer = (state = { loading: false, singleCard: {}, error: null }, action) => {
  switch(action.type) {
    case PRODUCT_DETAILS_REQUEST:
      return { ...state, loading: true };
    case PRODUCT_DETAILS_SUCCESS:
      return { ...state, loading: false, singleCard: action.payload };
    case PRODUCT_DETAILS_FAIL:
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

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