استخدام AJAX مع React
< React
كيف يمكنني إجراء استدعاء في AJAX؟
بإمكانك استخدام أي مكتبة AJAX تريدها مع React. من المكتبات الشائعة هنالك Axios، و jQuery AJAX، والمكتبة المُضمَّنة مع المتصفح والتي تُدعى window.fetch.
في أي تابع من توابع دورة الحياة يجب عليّ إجراء استدعاء AJAX؟
يجب عليك الحصول على البيانات عن طريق استدعاء AJAX في تابع دور الحياة componentDidMount، وهذا لكي تستطيع استخدام التابع setState لتحديث مكوّنك عند استقبال البيانات.
مثال: استخدام نتائج AJAX لتعيين الحالة المحلية
يُوضّح المكوّن التالي كيفيّة إجراء استدعاء AJAX ضمن التابع componentDidMount لتعيين الحالة المحليّة للمكوّن.
تُعيد واجهة برمجة التطبيق في هذا المثال كائن JSON مشابه لما يلي:
{
items: [
{ id: 1, name: 'Apples', price: '$2' },
{ id: 2, name: 'Peaches', price: '$5' }
]
}
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
fetch("https://api.example.com/items")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.items
});
},
// ملاحظة: من الهام التعامل مع الأخطاء هنا
// بدلًا من من استخدام الكتلة catch()
// لكي لا نقبل الاستثناءات من أخطاء فعليّة في المكوّنات
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.name}>
{item.name} {item.price}
</li>
))}
</ul>
);
}
}
}