Saya mencoba menyetel atribut src secara dinamis dari komponen <img /> saya dengan data yang diambil oleh aksio tetapi terus gagal. Saya tidak tahu cara mendapatkan nilai properti urlToImage dari objek data yang diambil.

Saya telah mencoba const mainArticle = articles[0].urlToImage; dan kemudian menyetel src={mainArticle}. Saya bisa console.log(articles[0]) tetapi tidak console.log(articles[0].title) karena tiba-tiba berubah menjadi tidak terdefinisi. Tahu mengapa ini terjadi?

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;

Saya berharap untuk bekerja sama seperti article.title, tetapi inilah yang saya dapatkan sebagai gantinya: TypeError: articles[0] is undefined

0
Hermeneutiker 28 Oktober 2019, 21:56

1 menjawab

Jawaban Terbaik

Hai, Anda selalu dapat memeriksa apakah artikel telah dimuat sebelum menggunakannya seperti ini:

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

Operator '&&' memeriksa apakah ada sebelum mencoba memuatnya. Kelemahannya adalah Anda mungkin memiliki beberapa elemen pemuatan halaman Anda saat gambar masih kosong.

Opsi lainnya adalah memiliki status isFetched yang berubah menjadi true saat data dimuat dan Anda merender seluruh komponen secara kondisional jika data dimuat.

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>)
0
nthn 28 Oktober 2019, 20:31