为什么articles[0] 未定义？

Question

我正在尝试使用 axios 获取的数据动态设置我的 <img /> 组件的 src 属性，但总是失败。我不知道如何从获取的数据对象中获取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>)