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

• يمكن استخدام 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>
  );
}

أنت تمرر لتابع 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.

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

ثانياً كان لديك خطأ قمت بإستدعاء 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>
  );
}