প্রতিক্রিয়া ঘটাতে API কল করার সঠিক উপায় কী?

Question

আমি সম্প্রতি Angular থেকে ReactJs এ চলে এসেছি। আমি এপিআই কলগুলির জন্য jQuery ব্যবহার করছি। আমার একটি এপিআই রয়েছে যা একটি এলোমেলো ব্যবহারকারীর তালিকা প্রদান করে যা একটি তালিকায় মুদ্রিত হবে।

আমি কীভাবে আমার এপিআই কল লিখব তা নিশ্চিত নই। এর জন্য সর্বোত্তম অনুশীলন কী?

আমি নিম্নলিখিত চেষ্টা করেছিলাম কিন্তু আমি কোনও আউটপুট পাচ্ছি না। প্রয়োজনে বিকল্প এপিআই লাইব্রেরি বাস্তবায়নের জন্য আমি উন্মুক্ত।

নীচে আমার কোডটি দেওয়া হয়েছে:

import React from 'react';

export default class UserList extends React.Component {    
  constructor(props) {
    super(props);
    this.state = {
      person: []
    };
  }

  UserList(){
    return $.getJSON('https://randomuser.me/api/')
    .then(function(data) {
      return data.results;
    });
  }

  render() {
    this.UserList().then(function(res){
      this.state = {person: res};
    });
    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">
          {this.state.person.map((item, i) =>{
            return(
              <h1>{item.name.first}</h1>
              <span>{item.cell}, {item.email}</span>
            )
          })}
        <div>
      </div>
    )
  }
}

Comments

আপনি কোন স্টেট ম্যানেজমেন্ট লাইব্রেরি ব্যবহার করছেন তার উপরে আমি নির্ভর করি। আপনি যদি কোনওটি ব্যবহার না করে থাকেন তবে আপনি নিজের এপিআই কলগুলি পৃথক ফাইলে সরিয়ে নিতে পারেন, এবং কলিব্যাকে আপনার পরিস্থিতিতে এপিআই ফাংশনগুলি কল করতে পারেন componentDidMount।

— ই

আপনি fetch()যদি কেবল অজ্যাক্স অনুরোধগুলি করতে jQuery ব্যবহার করেন তবে আপনি jQuery এর পরিবর্তে ব্যবহার করতে পারেন ।

— ফ্রেড

জ্যাকুরি কেন ব্যবহার করবেন? জ্যাকুরি একটি বিশাল গ্রন্থাগার এবং এটি অপ্রয়োজনীয়

— রবিন

এখানে কেবল যুক্ত করা বর্তমানে useEffectসম্ভবত এপিআই কল করার জায়গা। দেখুন btholt.github.io/complete-intro-to-react-v5/effects

— SHW

Answer 1

এই ক্ষেত্রে, আপনি ভিতরে ভিতরে অজ্যাক্স কল করতে পারেন componentDidMountএবং তারপরে আপডেট করতে পারেনstate

export default class UserList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {person: []};
  }

  componentDidMount() {
    this.UserList();
  }

  UserList() {
    $.getJSON('https://randomuser.me/api/')
      .then(({ results }) => this.setState({ person: results }));
  }

  render() {
    const persons = this.state.person.map((item, i) => (
      <div>
        <h1>{ item.name.first }</h1>
        <span>{ item.cell }, { item.email }</span>
      </div>
    ));

    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">{ persons }</div>
      </div>
    );
  }
}

Comments

এটি কার্যকর হয়েছে, ধন্যবাদ .. আপনি কি আমাকে পরামর্শ দিতে পারেন "ভাল রাষ্ট্র পরিচালনার জন্য কোনটি সেরা গ্রন্থাগার"

— রাজ আরজে

@ রাজ আরজে আজকাল আমি মনে করি এটি রেডাক্স

— আলেকজান্ডার টি।

রেডাক্স এই দিনগুলিতে বেশি জনপ্রিয়, এর স্টাইলটি কার্যকরী প্রোগ্রামিং থেকে আসে। আপনি যদি ওওপি শৈলী থেকে এসে থাকেন তবে মোবক্স (মুবক্সজএস.সি.থুথ.ব. / মবক্স ) একটি দুর্দান্ত রাষ্ট্র পরিচালনার লাইব্রেরি, এটি আপনাকে বসি কোড লেখার দিকে মনোনিবেশ করতে দেয় এবং শেষ পর্যন্ত আপনার বয়লারপ্লেট কোড হ্রাস করে

— Nhan Tran

Answer 2

আপনি ফ্লাক্স আর্কিটেকচারটি পরীক্ষা করে দেখতে চাইতে পারেন । আমি প্রতিক্রিয়া-রেডাক্স বাস্তবায়নও পরীক্ষা করে দেখার পরামর্শ দিই । আপনার কর্মগুলিতে আপনার এপিআই কলগুলি রাখুন। এটি উপাদানটিতে রাখার চেয়ে এটি অনেক বেশি পরিষ্কার।

ক্রিয়াগুলি হ'ল সহায়ক পদ্ধতি যা আপনি নিজের অ্যাপ্লিকেশনের অবস্থা পরিবর্তন করতে বা এপিআই কল করতে কল করতে পারেন।

Comments

ট্রপার আপনাকে ধন্যবাদ সুতরাং, আমি কি আমার এপিআই সম্পর্কিত কলগুলি পৃথক ফাইলগুলিতে রাখতে পারি? এবং আমি কীভাবে তাদের আমার "উপাদান শ্রেণিতে" কল করব? আমার কোন ফোল্ডারের কাঠামো অনুসরণ করা উচিত? সেরা অনুশীলনটি কী? পিএস- আমি এই প্রাথমিক প্রশ্ন জিজ্ঞাসা করে প্রতিক্রিয়া করতে নতুন।

— রাজ আরজে

রিডেক্স বাস্তবায়নে, ক্রিয়া পদ্ধতিগুলি উপাদানগুলিতে ইনজেকশনের ব্যবস্থা করা হয়। এই পদ্ধতিগুলি এখন আপনার উপাদানটির প্রপসে পরিণত হবে যা আপনি কল করতে পারেন। আপনি কাঠামোর জন্য প্রতিক্রিয়া-হ্রাস-স্টার্টার-কিটটি পরীক্ষা করে দেখতে পারেন ।

— জিই ট্রুপার

Answer 3

রাষ্ট্র আপডেট করার জন্য fetchভিতরে পদ্ধতিটি ব্যবহার করুন componentDidMount:

componentDidMount(){
  fetch('https://randomuser.me/api/')
      .then(({ results }) => this.setState({ person: results }));
}

Answer 4

এই আলোচনাটি কিছুক্ষণ হয়ে গেছে এবং @ আলেকজান্দার টি এর উত্তরটি আমার মতো নতুন প্রতিক্রিয়া জানাতে একটি ভাল গাইড সরবরাহ করেছে provided এবং আমি উপাদানটি রিফ্রেশ করার জন্য একই API কে একাধিকবার কল করার বিষয়ে কিছু অতিরিক্ত জ্ঞান ভাগ করে নেব, আমি মনে করি এটি সম্ভবত একটি সাধারণ সমস্যা যা নবাগত প্রথমদিকে মুখোমুখি হতে পারে।

componentWillReceiveProps(nextProps), অফিসিয়াল ডকুমেন্টেশন থেকে :

প্রপ পরিবর্তনের প্রতিক্রিয়ায় আপনাকে রাষ্ট্র আপডেট করতে হবে (উদাহরণস্বরূপ, এটি পুনরায় সেট করতে), আপনি এটি.পড়গুলি এবং নেক্সটপ্রপসের সাথে তুলনা করতে পারেন এবং এই পদ্ধতিতে এই.সেটস্টেট () ব্যবহার করে রাষ্ট্রের ট্রানজিশনগুলি সম্পাদন করতে পারেন।

আমরা উপসংহারে পৌঁছে যেতে পারি যে এখানে প্যারেন্ট উপাদান থেকে প্রপসগুলি পরিচালনা করি এমন জায়গা, এপিআই কল এবং আপডেটের স্থিতি।

@ আলেকজান্ডার টি এর উদাহরণের ভিত্তিতে:

export default class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {person: []};
  }

  componentDidMount() {
   //For our first load. 
   this.UserList(this.props.group); //maybe something like "groupOne"
  }

  componentWillReceiveProps(nextProps) {
    // Assuming parameter comes from url.
    // let group = window.location.toString().split("/")[*indexParameterLocated*];
    // this.UserList(group);

    // Assuming parameter comes from props that from parent component.
    let group = nextProps.group; // Maybe something like "groupTwo" 
    this.UserList(group);
  }

  UserList(group) {
    $.getJSON('https://randomuser.me/api/' + group)
      .then(({ results }) => this.setState({ person: results }));
  }

  render() {
    return (...)
  }
}

---

হালনাগাদ

componentWillReceiveProps() হ্রাস করা হবে।

জীবনচক্রের এখানে কেবলমাত্র কয়েকটি পদ্ধতি ( ডক-এ সমস্ত ) রয়েছে যা আমি মনে করি যে সাধারণ ক্ষেত্রে এপিআই মোতায়েনের সাথে সম্পর্কিত হবে:

উপরের চিত্রটি উল্লেখ করে:

• এপিআই স্থাপন করুন componentDidMount()

  এখানে এপিআই কল দেওয়ার উপযুক্ত দৃশ্যটি হ'ল এই উপাদানটির সামগ্রী (এপিআইয়ের প্রতিক্রিয়া থেকে) অচল থাকবে, componentDidMount()কেবল উপাদানটি মাউন্ট করার সময় কেবলমাত্র আগুন হবে , এমনকি নতুন প্রপসগুলি প্যারেন্ট উপাদান থেকে পাস হয়ে গেছে বা নেতৃত্বের জন্য পদক্ষেপ রয়েছে re-rendering।
  উপাদানটি পুনরায় রেন্ডার করতে পার্থক্যটি পরীক্ষা করে তবে পুনরায় মাউন্ট করে না । ডক
  থেকে উদ্ধৃতি :

আপনার যদি কোনও দূরবর্তী শেষ পয়েন্ট থেকে ডেটা লোড করার প্রয়োজন হয় তবে নেটওয়ার্ক অনুরোধটি ইনস্ট্যান্ট করার জন্য এটি ভাল জায়গা।

---

• এপিআই স্থাপন করুন static getDerivedStateFromProps(nextProps, prevState)

আমাদের লক্ষ্য করা উচিত যে দুটি ধরণের উপাদান আপডেট করা আছে , setState() বর্তমান উপাদানগুলিতে এই পদ্ধতিটি ট্রিগার করতে পরিচালিত করবে না , তবে পুনরায় রেন্ডারিং বা প্যারেন্ট উপাদানগুলির নতুন প্রপসগুলি করবে । আমরা আবিষ্কার করতে পারি যে মাউন্ট করার সময় এই পদ্ধতিটিও ফায়ার করে।

যদি আমরা বর্তমান উপাদানটি কোনও টেম্পলেটের মতো ব্যবহার করতে চাই তবে এটি এপিআই মোতায়েন করার উপযুক্ত জায়গা এবং এপিআইয়ের নতুন প্যারামিটারগুলি প্যারেন্ট উপাদান থেকে আগত প্রপস ।
আমরা এপিআই থেকে আলাদা প্রতিক্রিয়া পেয়েছি এবং stateএই উপাদানটির বিষয়বস্তু পরিবর্তন করতে এখানে একটি নতুন ফেরত দেব।

উদাহরণস্বরূপ:
প্যারেন্ট উপাদানগুলিতে বিভিন্ন গাড়ির জন্য আমাদের একটি ড্রপডাউন তালিকা রয়েছে, এই উপাদানটি নির্বাচিতটির বিশদ প্রদর্শন করা দরকার।

---

• এপিআই স্থাপন করুন componentDidUpdate(prevProps, prevState)

এর থেকে পৃথক static getDerivedStateFromProps(), এই পদ্ধতিটি প্রাথমিক রেন্ডারিং বাদে প্রতিটি রেন্ডারিংয়ের সাথে সাথেই শুরু করা হয়। আমরা এপিআই কলিং এবং একটি উপাদান মধ্যে রেন্ডার পার্থক্য থাকতে পারে।

পূর্ববর্তী উদাহরণটি প্রসারিত করুন:
গাড়ির বিবরণগুলি দেখানোর উপাদানটিতে এই গাড়ির সিরিজের একটি তালিকা থাকতে পারে, আমরা যদি 2013 সালের উত্পাদনটি পরীক্ষা করতে চাই, আমরা ক্লিক করতে পারি বা নির্বাচন করতে পারি বা ... তালিকা আইটেমটি setState()এটি প্রতিফলিত করার জন্য প্রথমে নেতৃত্ব দেয় এই উপাদানটিতে আচরণ (যেমন তালিকার আইটেমটি হাইলাইট করার মতো), এবং নিম্নলিখিতটিতে componentDidUpdate()আমরা নতুন প্যারামিটারগুলি (রাষ্ট্র) সহ আমাদের অনুরোধটি প্রেরণ করি। প্রতিক্রিয়া পাওয়ার পরে, আমরা setState()আবার গাড়ির বিবরণের বিভিন্ন বিষয়বস্তু রেন্ডার করার জন্য। নিম্নলিখিতগুলিকে componentDidUpdate()অনন্ত লুপটি সৃষ্টি হতে রোধ করতে , আমরা prevStateএপিআই প্রেরণ করব এবং নতুন সামগ্রীটি রেন্ডার করব কিনা তা সিদ্ধান্ত নেওয়ার জন্য এই পদ্ধতির শুরুতে ব্যবহার করে রাষ্ট্রের তুলনা করা দরকার ।

এই পদ্ধতিটি প্রকৃতপক্ষে ঠিক যেমন ব্যবহার করা যেতে পারে static getDerivedStateFromProps()তবে propsব্যবহারের মাধ্যমে পরিবর্তনগুলি পরিচালনা করা দরকার prevProps। এবং componentDidMount()প্রাথমিক এপিআই কলটি পরিচালনা করতে আমাদের সহযোগিতা করতে হবে।

ডক থেকে উদ্ধৃতি :

... যতক্ষণ না আপনি বর্তমান প্রপসকে আগের প্রপসের সাথে তুলনা করেন ততক্ষণ নেটওয়ার্ক অনুরোধগুলি করার পক্ষে এটি একটি ভাল জায়গা ...

Answer 5

আমি চাই আপনি রিডেক্স http://redux.js.org/index.html এ দেখুন

এ্যাসিঙ্ক কলগুলি পরিচালনা করার জন্য তাদের কাছে খুব ভালভাবে সংজ্ঞায়িত পদ্ধতি রয়েছে, যেমন এপিআই কলগুলি, এবং এপিআই কলগুলির জন্য jQuery ব্যবহার করার পরিবর্তে, আমি আনতে বা এনপিএম প্যাকেজগুলির জন্য অনুরোধ করতে চাই , আনতে বর্তমানে আধুনিক ব্রাউজারগুলি দ্বারা সমর্থিত, তবে একটি শিমও উপলব্ধ সার্ভার সাইড

এটি আরও একটি আশ্চর্যজনক প্যাকেজ সাপরেজেন্ট রয়েছে , যা একটি এপিআই অনুরোধ তৈরি করার সময় এর অনেকগুলি বিকল্প রয়েছে এবং এটির ব্যবহার করা খুব সহজ।

Answer 6

রেন্ডার ফাংশনটি খাঁটি হওয়া উচিত, এর অর্থ এই যে এটি কেবলমাত্র রাজ্য ব্যবহার করে এবং রেন্ডার করার জন্য প্রপস ব্যবহার করে, কখনও রাজ্যকে রেন্ডারে সংশোধন করার চেষ্টা করবেন না, এটি সাধারণত কুৎসিত বাগের কারণ হয়ে থাকে এবং কার্যকারিতা উল্লেখযোগ্যভাবে হ্রাস পায়। আপনি যদি আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে ডেটা আনয়ন এবং উদ্বেগগুলি রেন্ডার করেন তবে এটিও একটি ভাল বিষয়। আমি আপনাকে এই নিবন্ধটি পড়ার পরামর্শ দিচ্ছি যা এই ধারণাটি খুব ভালভাবে ব্যাখ্যা করে। https://medium.com/@learnreact/container-components-c0e67432e005#.sfydn87nm

Answer 7

রিএ্যাক্ট ভি 16 ডকুমেন্টেশনের এই অংশটি আপনার প্রশ্নের উত্তর দেবে, কম্পোনেন্টডিডমাউন্ট () সম্পর্কে পড়বে:

componentDidMount ()

কম্পোনেন্ট মাউন্ট হওয়ার সাথে সাথে কম্পোনেন্টডিডমাউন্ট () শুরু করা হয়। সূচনা যা DOM নোড প্রয়োজন এখানে যেতে হবে। আপনার যদি কোনও দূরবর্তী শেষ পয়েন্ট থেকে ডেটা লোড করার প্রয়োজন হয় তবে নেটওয়ার্ক অনুরোধটি ইনস্ট্যান্ট করার জন্য এটি ভাল জায়গা। যে কোনও সাবস্ক্রিপশন সেট আপ করার জন্য এই পদ্ধতিটি ভাল জায়গা। আপনি যদি এটি করেন তবে কন্টেন্টউইলউনমઉન્ટ () এর সদস্যতা বাতিল করতে ভুলবেন না।

আপনি দেখতে পাচ্ছেন, কম্পোনেন্টডিডমাউন্টটি এপিআই কল করার জন্য সেরা স্থান এবং চক্র হিসাবে বিবেচিত হয়, নোডটিও অ্যাক্সেস করে, এর অর্থ এই সময়ের মধ্যে এটি কল করা নিরাপদ, ভিউ আপডেট করা বা আপনি যা করতে পারেন ডকুমেন্ট প্রস্তুত হওয়ার সময়, যদি আপনি থাকেন jQuery ব্যবহার করে, এটি কোনওভাবে আপনাকে ডকুমেন্টের স্মরণ করিয়ে দেওয়া উচিত ready

Answer 8

1) আপনি শেষ পয়েন্টগুলি থেকে ডেটা আনতে F etch API ব্যবহার করতে পারেন :

Githubব্যবহারকারীর জন্য সমস্ত স্থির করে আনার উদাহরণ

  /* Fetch GitHub Repos */
  fetchData = () => {

       //show progress bar
      this.setState({ isLoading: true });

      //fetch repos
      fetch(`https://api.github.com/users/hiteshsahu/repos`)
      .then(response => response.json())
      .then(data => {
        if (Array.isArray(data)) {
          console.log(JSON.stringify(data));
          this.setState({ repos: data ,
                         isLoading: false});
        } else {
          this.setState({ repos: [],
                          isLoading: false  
                        });
        }
      });
  };

2) অন্যান্য বিকল্প হ'ল অক্ষ ios

অক্ষগুলি ব্যবহার করে আপনি .json () পদ্ধতিতে http অনুরোধের ফলাফল পাস করার মধ্যবর্তী পদক্ষেপটি কাটাতে পারেন। অক্ষগুলি কেবল আপনার প্রত্যাশিত ডেটা অবজেক্টটি ফিরিয়ে দেয় returns

  import axios from "axios";

 /* Fetch GitHub Repos */
  fetchDataWithAxios = () => {

     //show progress bar
      this.setState({ isLoading: true });

      // fetch repos with axios
      axios
          .get(`https://api.github.com/users/hiteshsahu/repos`)
          .then(result => {
            console.log(result);
            this.setState({
              repos: result.data,
              isLoading: false
            });
          })
          .catch(error =>
            this.setState({
              error,
              isLoading: false
            })
          );
}

এখন আপনি এই কৌশলগুলির মধ্যে যে কোনওটি ব্যবহার করে ডেটা আনার জন্য চয়ন করতে পারেন componentDidMount

class App extends React.Component {
  state = {
    repos: [],
   isLoading: false
  };

  componentDidMount() {
    this.fetchData ();
  }

এদিকে ডেটা লোড হওয়ার সময় আপনি অগ্রগতি বারটি প্রদর্শন করতে পারেন

   {this.state.isLoading && <LinearProgress />}

Answer 9

আপনি আপনার ফাংশন উপাদানগুলিতে হুক সহ ডেটা আনতে পারেন

এপিআই কল সহ পুরো উদাহরণ: https://codesandbox.io/s/jvvkoo8pq3

দ্বিতীয় উদাহরণ: https://jsfiddle.net/bradcypert/jhrt40yv/6/

const Repos = ({user}) => {
  const [repos, setRepos] = React.useState([]);

  React.useEffect(() => {
    const fetchData = async () => {
        const response = await axios.get(`https://api.github.com/users/${user}/repos`);
        setRepos(response.data);
    }

    fetchData();
  }, []);

  return (
  <div>
    {repos.map(repo =>
      <div key={repo.id}>{repo.name}</div>
    )}
  </div>
  );
}

ReactDOM.render(<Repos user="bradcypert" />, document.querySelector("#app"))

Answer 10

বাহ্যিক এপিআই কলগুলির জন্য সর্বোত্তম স্থান এবং অনুশীলনটি হ'ল রিএক্ট লাইফাইসাইক্যাল মেথড কম্পোনেন্টডিডমাউন্ট () , যেখানে এপিআই কল কার্যকর হওয়ার পরে আপনার স্থানীয় অবস্থাকে নতুন রেন্ডার () মেথড কল ট্রিগার করতে আপডেট করা উচিত , তারপরে আপডেট হওয়া স্থানীয় রাষ্ট্রের পরিবর্তনগুলি হবে উপাদান ভিউ প্রয়োগ করা হবে।

রিঅ্যাক্টে প্রাথমিক বাহ্যিক ডেটা সোর্স কলের জন্য অন্যান্য বিকল্প হিসাবে বর্গের কনস্ট্রাক্টর () পদ্ধতিটি নির্দেশিত । কনস্ট্রাক্টর প্রথম উপাদানটি উপাদান উপাদানটির সূচনাতে সঞ্চালিত হয়। আপনি উচ্চ-অর্ডার উপাদানগুলির জন্য ডকুমেন্টেশনের উদাহরণগুলিতে এই পদ্ধতিটি দেখতে পেয়েছেন ।

বহিরাগত এপিআই কলগুলির জন্য পদ্ধতি উপাদান উইলমাউন্ট () এবং ইউএনএসএফE_কম্পোন্ট উইলমাউন্ট () ব্যবহার করা উচিত নয়, কারণ এগুলি হ্রাস করার উদ্দেশ্যে। এখানে আপনি সাধারণ কারণ দেখতে পাচ্ছেন, কেন এই পদ্ধতিটি অবমূল্যায়ন করা হবে।

যাইহোক, আপনাকে কখনই রেন্ডার () পদ্ধতি বা পদ্ধতিটি সরাসরি রেন্ডার () থেকে বাহ্যিক এপিআই কলের বিন্দু হিসাবে ব্যবহার করতে হবে না । আপনি যদি এটি করেন তবে আপনার অ্যাপ্লিকেশনটি ব্লক হয়ে যাবে ।

Answer 11

একটি পরিষ্কার উপায় হ'ল চেষ্টা / ধরুন ক্রিয়াকলাপের সাথে কম্পোনেন্টডিডমাউন্টের ভিতরে একটি অ্যাসিঙ্ক্রোনাস এপিআই কল করা ।

আমরা যখন একটি এপিআই কল করি তখন আমরা একটি প্রতিক্রিয়া পাই। তারপরে প্রতিক্রিয়াটিকে একটি জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তর করতে আমরা এটিতে JSON পদ্ধতি প্রয়োগ করি। তারপরে আমরা সেই প্রতিক্রিয়া অবজেক্টটি থেকে কেবল তার সন্তানের অবজেক্টটিকে "ফলাফল" (ডেটা.সাল্টস) নামে আছি।

শুরুতে আমরা "ইউজারলিস্ট "টিকে একটি খালি অ্যারে হিসাবে রাজ্যে সংজ্ঞায়িত করেছি। যত তাড়াতাড়ি আমরা এপিআই কল করি এবং সেই এপিআই থেকে ডেটা পাই, আমরা সেটস্টেট পদ্ধতিটি ব্যবহার করে ব্যবহারকারী তালিকায় "ফলাফল" নির্ধারণ করি ।

রেন্ডার ফাংশনের অভ্যন্তরে আমরা বলি যে ব্যবহারকারীর তালিকা রাষ্ট্র থেকে আসবে। যেহেতু ইউজারলিস্ট হ'ল অবজেক্টগুলির একটি বিন্যাস যা আমরা এটির মাধ্যমে ম্যাপ করি, প্রতিটি চিত্র "ব্যবহারকারী" এর একটি চিত্র, একটি নাম এবং একটি ফোন নম্বর প্রদর্শন করতে। এই তথ্যটি পুনরুদ্ধার করতে আমরা ডট স্বরলিপি ব্যবহার করি (যেমন ইউজারআরফোন)।

দ্রষ্টব্য : আপনার এপিআই এর উপর নির্ভর করে আপনার প্রতিক্রিয়া অন্যরকম দেখতে পারে। আপনার থেকে কোন ভেরিয়েবলগুলি প্রয়োজন তা দেখতে সম্পূর্ণ "প্রতিক্রিয়া" কনসোল.লগ করুন এবং তারপরে সেগুলি সেটস্টেটে নির্ধারণ করুন।

UserList.js

import React, { Component } from "react";

export default class UserList extends Component {
   state = {
      userList: [], // list is empty in the beginning
      error: false
   };

   componentDidMount() {
       this.getUserList(); // function call
   }

   getUserList = async () => {
       try { //try to get data
           const response = await fetch("https://randomuser.me/api/");
           if (response.ok) { // ckeck if status code is 200
               const data = await response.json();
               this.setState({ userList: data.results});
           } else { this.setState({ error: true }) }
       } catch (e) { //code will jump here if there is a network problem
   this.setState({ error: true });
  }
};

  render() {
  const { userList, error } = this.state
      return (
          <div>
            {userList.length > 0 && userList.map(user => (
              <div key={user}>
                  <img src={user.picture.medium} alt="user"/>
                  <div>
                      <div>{user.name.first}{user.name.last}</div>
                      <div>{user.phone}</div>
                      <div>{user.email}</div>
                  </div>
              </div>
            ))}
            {error && <div>Sorry, can not display the data</div>}
          </div>
      )
}}

Answer 12

এপিআই অনুরোধের জন্য অক্ষর ব্যবহার করা দুর্দান্ত হবে যা বাতিলকরণ, ইন্টারসেপ্টর ইত্যাদিকে সমর্থন করে ax

Comments

যদিও এটি ভুল নয়, কারণ অডিও এবং রিডেক্স ব্যবহার করা ডেটা আনার এবং রাষ্ট্র পরিচালনা করার একটি বৈধ উপায়, এটি সত্যই প্রশ্নের উত্তর দেয় না এবং এটি একটি মন্তব্যের কাছাকাছি।

— এমিল বার্গারন 21