मैं fetch का उपयोग करके एपीआई से डेटा लाने के लिए कुछ उदाहरणों के साथ काम कर रहा हूं। लेकिन, यह देखने में कुछ भी नहीं लौटा रहा है। क्या मैं गलत हूं? यह आबादी क्यों नहीं हो रही है? यहां एक कोड का लिंक दिया गया है।

यहां आवेदन कोड:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import axios from 'axios';
import './style.css';

const url='https://10degrees.uk/wp-json/wp/v2/posts';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      searchInput: 'tirur',
      avatarDatas: []
    };
    this.fetchData = this.fetchData.bind(this);
  }

  componentDidMount(){
    this.fetchData(url);
  }

  fetchData = (apiToFetch)=>{
     fetch(apiToFetch)
     .then(result=>result.json())
     .then(avatarData=>{
       this.setState({
         avatarDatas : avatarData
       })
     })
     .catch((error) => console.log(error));
  }

  render() {
    console.log(this.state.avatarDatas)
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
        {this.state.avatarDatas.map(item=>{
          <div>{item}</div>
        })}
        </p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));
0
user7411584 21 पद 2019, 20:15

1 उत्तर

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

आपका कोड दूरस्थ URL से सही ढंग से डेटा प्राप्त कर रहा है। हालांकि, आप अपनी render पद्धति में map फ़ंक्शन का गलत उपयोग कर रहे हैं। आपके पास:

{this.state.avatarDatas.map(item=>{
  <div>{item}</div>
})}

यह वास्तव में avatarDatas में सभी प्रविष्टियों के माध्यम से मैप करता है, लेकिन आपके द्वारा प्रदान किया गया कॉलबैक map कुछ भी वापस नहीं कर रहा है। आपने इसमें एक JSX स्टेटमेंट के साथ एक फ़ंक्शन ब्लॉक लिखा है, और कोई रिटर्न स्टेटमेंट नहीं है। आपको जो लिखना चाहिए था वह है:

{this.state.avatarDatas.map(item=>{
  return (<div>{item}</div>);
})}

या यह भी, जहां कोई वास्तविक फ़ंक्शन ब्लॉक नहीं है बल्कि केवल एक वापसी मूल्य है:

{this.state.avatarDatas.map(item=>
  <div>{item}</div>
)}

इस समय, avatarDatas को अभी भी सूचीबद्ध नहीं किया जाएगा, क्योंकि आपके map कॉलबैक में JSX item रेंडर करने का प्रयास कर रहा है। item एक ऑब्जेक्ट है, और रिएक्ट को यह नहीं पता होगा कि इसे एक स्ट्रिंग में कैसे बदला जाए। बल्कि ऐसा करें:

{this.state.avatarDatas.map(item=>
  <div>{item.title.rendered}</div>
)}

(या कई क्षेत्रों में से कोई भी जो प्रत्येक avatarData के पास है।)

अंत में, रिएक्ट अभी भी एक चेतावनी जारी कर सकता है, जिसमें कहा गया है कि सूची में प्रत्येक आइटम में एक अद्वितीय कुंजी होनी चाहिए। जब भी आप कई तत्वों को बनाने के लिए map का उपयोग करते हैं, तो रिएक्ट आपसे प्रत्येक तत्व को एक विशिष्ट पहचानकर्ता देने की अपेक्षा करता है, जिसका उपयोग वह उस तत्व की पहचान करने के लिए करेगा जब उसे पुन: प्रस्तुत करने के दौरान आपकी सूची को अपडेट करने की आवश्यकता होगी। इसका मतलब है कि आपको यह करना चाहिए:

{this.state.avatarDatas.map((item, index) =>
  <div key={index}>{item.title.rendered}</div>
)}

अब, आपका map कॉलबैक प्रत्येक <div> को एक अनुक्रमणिका प्रदान करता है और दुनिया के साथ सब ठीक है।

1
Alexander van Oostenrijk 21 पद 2019, 17:39