为什么articles[0]是未定义的？

Question

我试图用axios获取的数据动态地设置<img />组件的<img />属性，但总是失败。我不知道如何从获取的数据对象中获取urlToImage属性值。

我尝试了const mainArticle = articles[0].urlToImage;，然后设置了src={mainArticle}。我可以console.log(articles[0])，但不能console.log(articles[0].title)，因为它突然变成了未定义的。知道为什么会这样吗？

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

import AsideNews from '../../components/aside-news/aside-news.component';

import './front-page.styles.scss';

const FrontPage = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    const url =
      'https://newsapi.org/v2/everything?' +
      'q=guitar&' +
      'from=2019-10-17&' +
      'sortBy=popularity&' +
      'apiKey=thisIsSecret';

    const getData = async () => {
      const response = await axios
        .get(url)
        .then(console.log('isFetched'))
        .catch(err => console.error(err));
      const { data } = response;
      setArticles(data.articles);
    };
    getData();
  }, []);

  return (
    <div className='frontpage' articles={articles}>
      <main className='main-content'>
        <section className='first-section'>
          <AsideNews articles={articles} />

          <div className='main-headline'>
            <img
              src={articles[0].urlToImage}
              alt='main-headline'
              height='400px'
              width='90%'
            />
            <div className='main-headline-desc'>
              {articles
                .filter((article, idx) => idx === 0)
                .map(article => (
                  <p>{article.description}</p>
                ))}
            </div>

            <div className='main-headline-title'>
              {articles
                .filter((article, idx) => idx === 0)
                .map(article => (
                  <Link to='/'>
                    <h2>{article.title}</h2>
                  </Link>
                ))}
            </div>
          </div>
        </section>
      </main>
    </div>
  );
};

export default FrontPage;

我希望能和article.title一样工作，但我得到的结果是：TypeError: articles[0] is undefined

Answer 1

嗨，在使用之前，您可以检查文章是否已经加载，如下所示：

<img src={articles && articles[0].urlToImage} alt='main-headline' height='400px' width='90%'/>

“&”操作符在尝试加载它之前检查它是否存在。缺点是，您可能有一些元素的页面加载，而图像仍然是空白。

另一个选项是有一个isFetched状态，在加载数据时切换到true，如果加载了数据，则有条件地呈现整个组件。

const[isFetched, setIsFetched] = useState(false)

    const getData = async () => {
      const response = await axios
        .get(url)
        .then(()=> {
           setIsFetched(true)

           //write remainder of your function

    };
    getData();
  }, []);

return (!isFetched ? 'data loading' :
   <div>Your div component</div>)