استخدام AJAX مع React
< React
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
كيف يمكنني إجراء استدعاء في 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.id}>
{item.name} {item.price}
</li>
))}
</ul>
);
}
}
}
هذا مثال مكافئ يستخدم الخطافات:
function MyComponent() {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
// [] مصفوفة التبعيات الفارغة
// ستُنفذ مرة واحدة useEffect تعني أنّ
// componentDidMount() كما هو شأن
useEffect(() => {
fetch("https://api.example.com/items")
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result);
},
// ملاحظة: من الهام التعامل مع الأخطاء هنا
// بدلًا من من استخدام الكتلة catch()
// لكي لا نقبل الاستثناءات من أخطاء فعليّة في المكوّنات
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, [])
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.id}>
{item.name} {item.price}
</li>
))}
</ul>
);
}
}
انظر أيضًا
- المصطلحات
- أسئلة حول Babel، و JSX، وخطوات بناء التطبيقات
- تمرير الدوال إلى المكونات
- حالة المكونات
- التنسيق واستخدام CSS مع React
- بنية ملفات المشروع
- سياسة الإصدارات المتبعة في React
- DOM الافتراضي والكائنات الداخلية