استخدام AJAX مع 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.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>
    );
  }
}

انظر أيضًا

مصادر

صفحة استخدام AJAX مع React في توثيق React الرسمي.