خطأ جلب البيانات من الخادم بواسطة axios

قد تكون المشكلة من السيرفر حيث لا يقبل استقبال الطلبات من خادم مختلف، جرب استخدام cors على السيرفر ثم حاول مرة ثانية :

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

// باقي الكود

 الخطأ "Network Error" يشير إلى حدوث خطأ في الشبكة أثناء إجراء الاستدعاء، وطالما أنك لا تواجه مشكلة في الخادم من جانب العميل وتستطيع رؤية البيانات، حاول تجربة التالي لحل المشكلة:

1- في بعض الأحيان، يمكن أن يتسبب تعطيل سياسات الأمان (CORS) في حدوث أخطاء شبكة، لذلك عليك تمكين CORS على الخادم الخاص بك للسماح بالطلبات القادمة من المستعرض. من خلال إضافة رأس (header) إلى استجابة الخادم للسماح بجميع المصادر.

مثال:

const express = require('express');
const app = express();

app.get('/users', (req, res) => {
  // رمز لاسترداد بيانات المستخدمين
  const users = [{ name: 'User 1' }, { name: 'User 2' }];
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.json(users);
});

app.listen(5000, () => {
  console.log('Server is running on port 5000');
});

2- قد يكون هناك خطأ آخر في الجزء الخادم من التطبيق، تأكد من أن الخادم يعمل بشكل صحيح وأنه لا يوجد أخطاء في رمز الخادم الخاص بك.

3- تصحيح الكود الخاص بك للتأكد من استخدام Axios بشكل صحيح، حاول استخدام كود مشابه للتالي:

import axios from 'axios';
import { useEffect, useState } from 'react';

const MyComponent = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('http://localhost:5000/users');
        setUsers(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    // تقوم بعرض البيانات هنا
  );
};

export default MyComponent;

تأكد من تغيير "Axios" إلى "axios" بالحرف الصغير في استيرادها حيث أنك تستوردها بالحرف الكبير.

في الواقع و جدت الحل بفضلكما

في الأول كان يجب إضافة

const cors = require("cors")
app.use(cors())

ثم قمت بإضافة async await داخل الخطاف useEffect()

لم أقم بتغيير Axios  أستاذ @Mustafa Suleiman

في كل الحالات شكرا لكما أستاذ @Mustafa Suleiman @عمر قره محمد