React调用Flickr API无法获取图片问题求助

我帮你排查了代码里的几个关键问题，这些就是导致你拿不到图片列表的核心原因：

1. 错误使用mode: 'no-cors' #

当你设置mode: 'no-cors'时，浏览器会完全限制你访问响应的内容——哪怕请求成功了，你也没法读取response里的任何数据。这个模式只适合不需要处理响应的场景，而你需要获取图片数据，所以必须删掉这个配置。

2. Fetch响应处理逻辑错误 #

Fetch API返回的response对象不是直接的JSON数据，你得先调用response.json()方法解析响应体，才能拿到具体的内容。你直接访问response.data.items是完全行不通的。

3. 多余的请求头与凭证配置 #

Flickr的这个公开feed接口不需要Content-Type: application/json（你发起的是GET请求，根本没有请求体），credentials: 'include'也没必要，因为这个接口不需要携带用户凭证。多余的配置反而可能导致请求异常。

4. 使用已废弃的生命周期方法 #

componentWillMount已经被React官方废弃了，推荐用componentDidMount来发起异步请求，这是更规范、更安全的做法。

修复后的完整代码 #

const url = "https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json&nojsoncallback=true";

class App extends React.Component {
  constructor() {
    super();
    this.state = { items: [] };
  }

  componentDidMount() {
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error('请求失败');
        }
        return response.json();
      })
      .then((data) => {
        console.log(data.items);
        this.setState({ items: data.items });
      })
      .catch((err) => {
        console.error('获取数据出错:', err);
      });
  }

  render() {
    const mappedStorage = this.state.items.map((item, index) => (
      <li key={index}>
        <img src={item.media.m} alt="可爱小猫" />
      </li>
    ));
    return (
      <div>
        <h2>小猫照片列表</h2>
        <ul>{mappedStorage}</ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.body);

额外优化说明 #

• 给列表项加上了key属性，符合React列表渲染的要求，避免控制台警告。
• 把原来的纯文本链接改成了<img>标签，这样你能直接看到图片，而不是一串地址。
• 添加了错误捕获与日志打印，方便你排查后续可能出现的问题。

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