• 0

لا يتم عرض البيانات من API في مكون React؟

أريد أن أقوم بعرض سعر عملة BTC من خلال الـ API الخاص بـ coinbase، ومن المفترض أنه عند طلب الرابط التالي:

https://api.coinbase.com/v2/prices/BTC-USD/spot

تكون النتيجة بهذا الشكل:

{"data":{"base":"BTC","currency":"USD","amount":"56195.56"}}

لكن في مكون React التالي لا يتم عرض هذه البيانات:

getBTCPrice() {
  const url = 'https://api.coinbase.com/v2/prices/BTC-USD/spot';
  axios.get(url)
  .then(function (response) {
      return response.data.data.amount;
  }) 
}

render() {
  return(
    <div>
      BTC: {this.getBTCPrice()} USD
    </div>
  );
}

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
  • يمكن استخدام console.log لمعرفة شكل الداتا داخل ال response object
  • المشكله أنك تحاول الوصول الي data من ال resposne.data وهي غير موجوده يمكنك الوصول ال amount من ال response.data
  • تحتاج تعديل هذا السطر response.data.data.amount إلي reponse.data.amount
getBTCPrice() {
  const url = 'https://api.coinbase.com/v2/prices/BTC-USD/spot';
  axios.get(url)
  .then(function (response) {
		// return response.data.data.amount
        console.log("data")
        console.log(response.data)
        console.log(response.data.amount)
      return response.data.amount;
  }) 
}

render() {
  return(
    <div>
      BTC: {this.getBTCPrice()} USD
    </div>
  );
}

 

تمّ تعديل بواسطة محمد صقر3

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

أنت تمرر لتابع then تابعاً آخر يرد قيمة فماذا تفعل axios بهذه القيمة التي تردها؟ الجواب هو لا شيء لذلك لا يحدث شيء لديك ﻷن الطلب المرسل للمخدم عبارة عن asynchronous operation أي تحدث بالخلفية ولا يمكن لها أن ترد قيمة من نوع number وإنما فقط من نوع Promise وتابع then يرد Promise آخر وليس كما تظن يرد القيمة داخل Promise.

ما عليك فعله داخل then هو استدعاء setState هكذا:

class A extends React.Component{
  constructor(){
    this.state = {}
  }
  componentDidMount(){
    this.getBTCPrice();
  }
  getBTCPrice() {
    const url = 'https://api.coinbase.com/v2/prices/BTC-USD/spot';
    const self = this;
    axios.get(url)
    .then(function (response) {
         self.setState({price: response.data.data.amount});
    }) 
  }

  render() {
    return(
      <div>
      BTC: {this.state.price} USD
  </div>
);
}
}

لاحظ أننا نقوم باستدعاء طلب ajax داخل componentDidMount والذي عند انتهائه يقوم بوضع state للـReact.

تذكر أن العمليات التي ترد Promise دائماً asynchronous ولا يمكن تحويلها إلى synchronous بأي شكل من اﻷشكال، التابع then لا يقوم بتنفيذ Promise بل يرد Promise آخر ينتهي عند انتهاء سلسلة Promises قبل then.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

في البداية سنقوم بطباعة الاستجابة للتأكد أنك حصلت على استجابة بنجاح

ثانياً كان لديك خطأ قمت بإستدعاء data مرتين هكذا response.data.data.amount ويجب عليك حذف واحدة كما في الكود الموضح بالأسفل

getBTCPrice() {
  const url = 'https://api.coinbase.com/v2/prices/BTC-USD/spot';
  axios.get(url)
  .then(function (response) {
	  console.log(response) // للتأكد أنك حصلت على استجابة
      return response.data.amount;  // كان هناك خطأ سابقا
  }) 
}

render() {
  return(
    <div>
      BTC: {this.getBTCPrice()} USD
    </div>
  );
}

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن