मैं अपने <img /> घटक की src विशेषता को 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

0
Hermeneutiker 28 अक्टूबर 2019, 21:56

1 उत्तर

सबसे बढ़िया उत्तर

नमस्ते आप हमेशा जांच सकते हैं कि क्या लेख इस तरह उपयोग करने से पहले लोड किए गए हैं:

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

'&&' ऑपरेटर इसे लोड करने का प्रयास करने से पहले जांचता है कि यह मौजूद है या नहीं। नकारात्मक पक्ष यह है कि आपके पृष्ठ लोड के कुछ तत्व हो सकते हैं जबकि छवि अभी भी खाली रहती है।

एक अन्य विकल्प एक isFetched स्थिति है जो डेटा लोड होने पर सही पर टॉगल करता है और डेटा लोड होने पर आप पूरे घटक को सशर्त रूप से प्रस्तुत करते हैं।

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 अक्टूबर 2019, 20:31