React项目无法展示Unsplash随机图片问题求助

DevOps 小满

2026-8-20

问题解决方案

你的问题出在React组件的props传递与接收方式上，以下是具体修复步骤：

1. 修正父组件（App）的props命名

在App组件中，给子组件传递属性时，避免使用props这种通用名称，改用更语义化的命名（比如imageUrl），让代码更清晰：

// App组件中修改ImageList的调用
<ImageList imageUrl={cats}/>

2. 修正子组件（ImageList）的props接收与使用

React组件的第一个参数是包含所有传入属性的对象，你之前直接把整个对象传给img的src，浏览器会自动把对象转为字符串[object Object]，这就是显示异常的原因。需要从props对象中提取具体的URL：

import React from 'react';

// 用解构语法直接获取imageUrl属性，也可以用props.imageUrl的写法
function ImageList({ imageUrl }) {
    console.log(imageUrl);
    
    // 增加条件渲染，避免初始状态下src为空的无效渲染
    return (
    <div>{imageUrl && <img src={imageUrl} alt="cat"/>}</div>
    );
}
export default ImageList;