मेरे पास एक घटक Blog.js है जो this API से डेटा प्राप्त करता है। मेरा कोड दिखता है

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

// const BLOGS_URL = "https://cors-anywhere.herokuapp.com/api.vidyarajkumari.com/blogs/";
const BLOGS_URL = "http://api.vidyarajkumari.com/blogs/";

export default function Blog() {
  const [blogs, setBlogs] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(BLOGS_URL);
      setBlogs(request.data.blogs);
      return request;
      }
    fetchData();
    }, [])  

  return (
    <section className="colorlib-blog" data-section="blog">
      <div className="colorlib-narrow-content">
        <div className="row">
          <div className="col-md-6 col-md-offset-3 col-md-pull-3 animate-box" data-animate-effect="fadeInLeft">
            <span className="heading-meta">Read</span>
            <h2 className="colorlib-heading">Recent Blog</h2>
          </div>
        </div>
        <div className="row">
        {
          blogs.map((item, index) => {
            console.log(item);
            return (
              <div key={index} className="col-md-6 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
                <div className="blog-entry">                    
                  <a href="#" className="blog-img project">
                    <img 
                      src={item.feature_image} 
                      className="img-responsive img-fluid img-thumbnail fit-image" 
                      alt="Blog image"
                      style={{width: "100%", height: "30rem", objectFit: "cover"}}
                    />
                  </a>                    
                  <div className="desc">                      
                    <span><small>{item.created_at} </small> | <small> {item.category} </small> </span>
                      <h3><a href="#">{item.title}</a></h3>
                      <p>{item.excerpt}</p>
                  </div>
                </div>
              </div>
            )
          })
        }
      </div>
      <div className="row">
        <div className="col-md-12 animate-box">
          <p><Link to="/blogs" className="btn btn-primary btn-lg btn-load-more">View all blogs</Link></p>
        </div>
        <hr className="col-md-12" />
      </div>
    </div>
  </section>
  )
}

मैं जो देखता हूं वह यह है कि मैं ब्राउज़र कंसोल में लॉग किए जा रहे item ऑब्जेक्ट से JSX तत्वों के लिए डेटा देख सकता हूं लेकिन तत्व मेरे विकास सर्वर पर प्रस्तुत नहीं किए गए हैं। जब मैं ब्राउज़र इंस्पेक्टर टूल के साथ होवर करता हूं तो मैं तत्वों की रूपरेखा भी देख सकता हूं। इसका क्या कारण हो सकता है?

-2
dEBA M 16 जिंदा 2021, 14:05

1 उत्तर

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

ऐसा लगता है कि समस्या जेएसएक्स के भीतर div टैग के अंदर "ब्लॉग-एंट्री" वर्ग के साथ थी, और एपीआई से डेटा लाने में विफलता के कारण नहीं। इसे बदलने/हटाने से समस्या हल हो गई।

0
dEBA M 1 फरवरी 2021, 09:25