خطأ not valid as a React child في مكون React؟

هناك بعض الأمور البيسطة في الكود المرفق 

1- فيما يتعلق بإستخدام "axios" فيمكنك الحصول على البيانات مباشرة من خلال res.data كالتالي 

const res = await axios('/api');
console.log(res.data);

2- فيما يتعلق بالخطأ المرفق فذلك لأن الناتج من الدالة getData() عباره عن كائن "object" وفي ريأكت لايمكن أن يكون الإبن المطلوب عرضه وطباعته للمستخدم عباره عن كائن يحتوي على داتا وإن كان لابد من أن تعرض البيانات المحموله في هذا الكائن يمكنك إستخدام "JSON.stringify()" وذلك كالتالي

JSON.stringify(this.getData())

3- ولكن هناك أمر أخر سوف يتم عرض قوسين كالتالي "{}" فارغين للمستخدم دون وجود أي بيانات ؟!! ذلك لأنه في أول مرة يتم عرض المكون للمستخدم "component rendering" سوف تكون عملية جلب البيانات من الداله "getData()" لم يتم الإنتهاء من جلب البيانات بعد وكما نعلم لكي يتم إعادة عرض المكون بعد تمام عملية جلب البيانات لابد من أن نقوم بتخزين هذه البيانات في State وبذلك فور أن يتم إعطاء قيمه جديده ل State سوف يتم عرض البيانات لليوزر وبالتالي يمكن أن يكون الشكل النهائي للكود كالتالي

class Data extends React.Component {
  state = {};
  async getData() {
    const res = await axios('/api');
    console.log(res.data);
    this.setState(res.data);
  }
  componentDidMount() {
    this.getData();
  }

  render() {
    return <div>{JSON.stringify(this.state)}</div>;
  }
}

السيرفر الخاص بك يرسل لك object

{
   id: 1,
   name: "Adam"
}

ولا يمكنك في React وضع Object في دالة render 

لهذا يجب عليك في الكود وضع الاسم الذي في object كما في الأسفل ،بدلاً من وضع object نفسه 

class Data extends React.Component {
  state = {};
  async getData() {
    const res = await axios('/api');
    this.setState(res.data);
  }
  componentDidMount() {
    this.getData();
  }

  render() {
    return <div>{this.state.name}</div>; // يجب اختيار الاسم الذي داخل الحالة
  }
}

للحصول على المعلومات من ال axios  عليك استحدام دلالة ال then و ال catch  هذان مفهومان تابعان لل asyn بحيت ان الارسال request الي السيرفير سوق ياخد وقت و لن يعود بالمعلومات بنفس الدقيقة ممكن ان يتاخر حسب سرعه الانترنت مثلا و السيرقير و عوامل اخرى كثيرة لذلك ان كان السطر التالي يعتمد على الطلب الذي قمتي به بالaxios request  عليك استحدام await  قبلها و من هنا سينتظر البرنامج الى ان ينقذ السطر و يعود بالبيانات من السيرفير و ايضا علينا تحديد ان كان هذا الطلب من فئة post , get, pus .. الخ لذلك سيكون طريقة كتابة سطر تنفيذ الaxios كالتالي :

 await axios.post('/api',{ anyparametername:valueofparamete}) 

هذا في حالة ان كنت تريد ان ترسل معلومات الى السيرقر اما في حالة طلب معلومات من السيرفر فسوق يكون كالتالي :

 await axios.get("api")

الان هنا قما بتنفيذ الaxios و لكننا لم ناخذ المعلومات الراجعه منه بعد و كما قلنا فان الaxios لن يقوم بارجاع النتيجة مباشرة لذلك سيقوم بحفظ المعلومات ك promis و هي حاضنة للاحداث حيث انها سترجع pendding ان لم يقوم السيرفر بارجاع البينات بعد اما ان قام بارجاها سيقوم بحفظ النتيجة بداخلها لذلك علينا استحراج هذا البيانات من ذاحلها بهذا الطريقة 

await axois.get("api").then(result=>{

  console.log(result)

})



})

هنا في حالة ان كل شئ تم بطريقة صحيحة و تم استعاده معلومات اما في حالة انه حصل خطأ بالسيرفير او نقس العمليه علينا استحدام ال catch لنتبين ما هو الخطأ الذي حصل اثناء التنفيذ كالتالي 

await axois.get("api").then(result=>{

  console.log(result);

})

.catch(error=>{

  console.log(error)

})

ارسلت لك يعض الصور التوضيحية لذلك