React开发FCC维基百科查看器时Fetch请求失败问题求助

Hey there! Let's walk through your code step by step to fix the request issues and get those articles rendering properly.

一、请求部分的几个问题及修正 #

首先看你的gettingArticle方法，有几个需要调整的地方：

1. Fetch配置冗余且有误

   • Fetch的默认请求方法就是GET，所以method: 'GET'可以省略
   • dataType: 'json'是jQuery ajax的专属参数，Fetch并不识别这个，直接删掉就行
   • 维基百科的API需要添加origin=*参数来解决跨域问题，否则浏览器会因为CORS政策拦截请求

2. API URL补充跨域参数
   修正后的API地址应该是：

   const API = `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${searchQuery}&prop=info&inprop=url&utf8=&format=json&origin=*`;
   

3. 未定义变量的错误
   你的console.log('data fetched' + displayedArticles)里displayedArticles没定义，会抛出错误，要么删掉这行，要么等拿到数据后再打印正确的变量。

修正后的gettingArticle方法：

gettingArticle() {
  const { searchQuery } = this.state;
  const API = `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${searchQuery}&prop=info&inprop=url&utf8=&format=json&origin=*`;
  
  fetch(API)
    .then(response => {
      if (!response.ok) throw new Error('Request failed');
      return response.json();
    })
    .then(data => {
      // 维基百科返回的文章列表在data.query.search路径下
      this.setState({ 
        articlesList: data.query.search, 
        articles: true 
      });
      console.log('Fetched articles:', data.query.search);
    })
    .catch(err => console.error('Error:', err));
}

二、遍历渲染文章列表 #

现在拿到正确的文章数组后，你可以在render方法里遍历articlesList来生成DOM元素：

render() {
  const { articlesList, articles } = this.state;
  return (
    <div className="container">
      {/* 你的搜索框等其他元素 */}
      {articles && (
        <div className="articles-container">
          {articlesList.map((article, index) => (
            <div key={index} className="article-card">
              <h3>
                <a 
                  href={`https://en.wikipedia.org/wiki/${encodeURIComponent(article.title)}`}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {article.title}
                </a>
              </h3>
              <p>{article.snippet}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

几点说明：

• 用map遍历数组时，一定要给每个元素加唯一的key（这里用index是临时方案，维基百科返回的搜索结果里没有专属id，所以index暂时可用）
• 通过encodeURIComponent处理文章标题，避免特殊字符导致链接失效
• 添加rel="noopener noreferrer"是安全最佳实践，防止打开的外部页面篡改你的页面

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