كيفية استخدام async/await في وظائف Render في React

في React، عادةً ما تكون وظيفة العرض مخصصة للعمليات النقية والمتزامنة. ومع ذلك، في بعض السيناريوهات، قد تواجه الحاجة إلى تنفيذ مهام غير متزامنة داخل هذه الوظيفة. ستتناول هذه المقالة كيفية استخدام بناء الجملة غير المتزامن/الانتظار بشكل فعال في وظيفة العرض.

فهم المشكلة

كما يسلط الضوء على السؤال، محاولة استخدام async/ انتظار مباشرة داخل وظيفة الخريطة في وظيفة التجسيد يمكن أن يؤدي إلى سلوك غير متوقع. وذلك لأن وظيفة الخريطة تتوقع عمليات متزامنة، ومحاولة إجراء مكالمات غير متزامنة داخلها قد تؤدي إلى تعطيل تدفق عملية العرض.

فصل جلب البيانات عن العرض

لحل هذه المشكلة، يوصى بفصل عملية جلب البيانات عن منطق العرض. بدلاً من إجراء عمليات غير متزامنة داخل وظيفة التجسيد، من الأفضل بدء جلب البيانات في مكون منفصل أو خطاف.

جلب البيانات غير المتزامنة في المكون الأصلي

في هذا الأسلوب، يمكنك إنشاء مكون أصلي (على سبيل المثال، ParentThatFetches) مسؤول عن تقديم طلبات غير متزامنة وإدارة البيانات. باستخدام أساليب دورة الحياة أو الخطافات، يقوم المكون الأصلي بجلب البيانات وتخزينها في الحالة. بعد ذلك، يعرض المكون الأصلي بشكل مشروط مكونًا فرعيًا وظيفيًا خالصًا (على سبيل المثال، الطفل) الذي يتلقى البيانات التي تم جلبها كدعائم. ]

}
componentDidMount () {

this.state = {};

}

render () {

fetch('/some/async/data')
  .then(resp => resp.json())
  .then(data => this.setState({data}));

}

{this.state.data && (
  <Child data={this.state.data} />
)}

{data.map((x, i) => (

);

{data.map((x, i) => (<td key={i}>{x}</td>))}

مع ظهور الخطافات في React، يمكن تبسيط عملية جلب البيانات بشكل أكبر. يوضح مقتطف التعليمات البرمجية التالي كيفية استخدام الخطافات لجلب البيانات بشكل غير متزامن وتحديث الحالة وفقًا لذلك:

const [data, updateData] = useState();

}, []);

إرجاع البيانات &&

const getData = async () => {
  const resp = await fetch('some/url');
  const json = await resp.json()
  updateData(json);
}
getData();