cannot get proprety data of undefined في مكون react

في الحقيقة هذا خطا شائع و يحصل لي داءما لكن حله بسيط فقط يجب ان تفهم ان المكون عندما تزور صفحة الويب يشتغل مباشرة وفي حالتك انت استجابة السيرفر قد تاخذ بعض الوقت وهنا المكون عندما يشتغل سيحاول الدخول الى معلومات غير متواجدة وهنا يحصل الخطا ويمكنك معالجته بالتاكد ان state في هذه الحالة لا يساوي undefined

import React from 'react';
import axios from 'axios';

export default function Users() {
  const [res, setRes] = useState();

  useEffect(() => {
    async function getData() {
      const res = await axios.get('http://localhost:3000/api/users');
      if (res.status === 200) {
        setRes(res);
      }
    }
    getData();
  }, []);

  return (
    <div>
    // هنا نتأكد ان res لا تساوي undefined
    {res && res.data && res.data.users.map((user) => <p key={user.id}>{user.name}</p>)}
    </div>
  );
}

وهناك طريقة اخرى لمعالجة المشكلة باستخدام خاصية حديثة يقدمها javascript وهي ال ?

import React from 'react';
import axios from 'axios';

export default function Users() {
  const [res, setRes] = useState();

  useEffect(() => {
    async function getData() {
      const res = await axios.get('http://localhost:3000/api/users');
      if (res.status === 200) {
        setRes(res);
      }
    }
    getData();
  }, []);

  return (
    <div>
      {res?.data?.users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

هذا الكود

res && res.data && res.data.users

يساوي

res?.data?.users

مرحبًا @Rayden Storm،

يمكنك أيضًا جلب البيانات مباشرة من خلال إستاخدام دالتين الأولى باستخدام then وتعطي الدالة التي تجلب البيانات بشكل صحيح. وإن لم يتم جلب البيانات بشكل صحيح catch والتي تعطي في أوامر الطرفية أنه حدث خطأ في جلب البيانات.

كما في المثال التالي:

export default function Users() {
  const [res, setRes] = useState();

useEffect(() => {
  axios.get('http://localhost:3000/api/users')
    .then(function ({data}) {
    setRes(data);
    console.log("No problem => ", data)
  })
    .catch(function (error) {
    console.log("Error => ", error)
  })
}, []);
  
    return (
    <div>
      {res.users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}