从React中打印来自Array的对象？

Question

我想在React中使用新闻API制作新闻网站，但我无法显示JSON的文章 。 我认为获取功能是正确的，但在控制台中两次打印数据。我不知道为什么，如果您知道，请告诉我。另外，我无法使用阵列上的地图打印显示中的文章列表，请告诉我，我真的很困惑。

const [News, setNews] = useState([]);
 useEffect(() => {
    fetch(
      `https://newsapi.org/v2/top-headlines?country=in&category=${category}&apiKey=${API_KEY}`
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data.articles);
        setNews(data.articles);
      });
  }, [category]);

作为回报，我想获得文章列表，但这只是使我的桌面屏幕空白，甚至没有出现错误。

<ul>
        {News.map((data) => {
          <li key={data.title}>{data.title}</li>;
        })}
</ul>

控制台返回

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {source: {…}, author: null, title: 'E-invoicing ‘soon to be mandated’ for units with over ₹10-cr turnover - BusinessLine', description: null, url: 'https://news.google.com/__i/rss/rd/articles/CBMikg…b3JlLW5leHQvYXJ0aWNsZTY1NTk0OTcyLmVjZS9hbXAv?oc=5', …}
1: {source: {…}, author: null, title: 'Cancer Horoscope for July 2022 - Susan Miller Astrology Zone - Astrology Zone', description: 'The latest in astrological trends by Susan Miller,…r advancement, travel, health, fitness, and more.', url: 'https://www.astrologyzone.com/forecasts/cancer-horoscope-for-july-2022/', …}
2: {source: {…}, author: 'Riya Ghosh', title: 'iPhone User? Know all about the WhatsApp Blur Tool - Techstory', description: 'This latest technology introduced by WhatsApp enab…ent of the picture before ', …}
3: {source: {…}, author: null, title: 'Supreme Court Judge Who Heard Nupur Sharma Plea Slams "Personal Attacks" - NDTV', descripti.....}
.....

请告诉我我做错了什么

Answer 1

您的代码中有一个错别字：

 console.log(data.articles);
        setNews(data.articals);

data..articles and data.Articals？

Answer 2

对于与控制台两次打印有关的问题，它可能与严格的模式有关，如果您使用的是React 18并且在开发模式下具有严格的模式，则在开发模式下运行两次，在生产模式下，它通常可以单一起作用。您可以阅读官方文档并查看 YouTube视频清楚地说明了为什么这样做。

对于第二个问题，为什么无法打印文章列表，它与News.map有关。在这里您缺少返回语句

<ul>
        {News.map((data) => {
          return <li key={data.title}>{data.title}</li>;
        })}
</ul>

让我知道这对您有所帮助。

Answer 3

问题1 ：控制台打印两次

是因为使用exect 18的使用效率两次 - 请检查Chrome Dev工具上的“网络”选项卡以验证是否发送了两次请求。

您可以使用If/else语句，如果数据已经获取，则不要再次调用API。

Quality-2 ：不显示列表

，因为您缺少映射功能中的返回语句。

<ul>
        {News.map((data) => {
         return <li key={data.title}>{data.title}</li>;
        })}
</ul>

希望这有帮助！