Почему статьи [0] не определены? - PullRequest
Новая
       23

Почему статьи [0] не определены?

0 голосов
/ 28 октября 2019

Я пытаюсь динамически установить атрибут src моего компонента <img /> с данными, извлекаемыми axios, но постоянно терпящими неудачу. Я не знаю, как получить значение свойства 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

1 Ответ

0 голосов
/ 28 октября 2019

Привет, вы всегда можете проверить, были ли загружены статьи, прежде чем использовать его следующим образом: 

<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>)
...