اذهب إلى المحتوى
  • 0

TypeError: friends.find is not a function

محمد الحربي36

السؤال

قمت بعمل دالة تُمكّن المستخدم من إضافة صديق ولكن بمجرد أن أضغط على زر إضافة صديق يظهر لي هذا الخطأ الموضح في الصورة 

هذه الدالة التي يتم تشغيلها بمجرد الضغط على زر إضافة صديق:

Friend.jsx :

const Friend = ({ friendId, name, subtitle, userPicturePath }) => {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { user } = useSelector((state) => state.user);
    const token = useSelector((state) => state.token);
    const friends = useSelector((state) => state.user.friends);

// هذه الدالة الشرطية أضفتها مؤخرا
if (!Array.isArray(friends)) {
        return console.log(friends);
    } // بمجرد إضافة هذه الدالة الشرطية يتحول الخطأ من 
      // friends.find is not a function
      // ألى
      // friends.map is not a function (FriendsList.jsx) وهذه موجودة في ملف

    const isFriend = friends.find((friend) => friend._id === friendId);
    
    const patchFriend = async() => {
        const response = await fetch(
            `http://localhost:3001/users/${user}/${friendId}`,
            {
                method: "PATCH",
                headers: {
                    Authorization: `Bearer ${token}`,
                    "Content-Type": "application/json"
                },
            }
        );
        const data = await response.json();
        dispatch(setFriends({ friends: data }));

    };

دالة map الموجودة في ملف FriendsList.jsx

<div display="flex" flexDirection="column" gap="1.5rem">
                {friends.map((friend) => (
                    <Friend
                    key={friend._id}
                    friendId={friend._id}
                    name={`${friend.name} ${friend.username}`}
                    subtitle={friend.occupation}
                    userPicturePath={friend.picturePath}
                    />
                ))}
            </div>

 

find is not a function.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

من المفترض أنها خاصية موجودة في الـ UserSchema وتحمل type:Array و لقيمة الافتراضية مصفوفة فارغة

friends: {
            type: Array,
            default: [],
        },

وقمت باستدعائها باستخدام useSelector من خلال الـ redux

تم التعديل في بواسطة محمد الحربي36
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

المشكلة في ملف Fiend.jsx، وأيضًا هناك مشكلة وهي أن خاصية key هي خاصية خاصة تستخدمها React لتتبع وتحديث قوائم المكونات بكفاءة، ولا يمكن استخدام خاصية key كخاصية عادية في المكونات.

لذلك تجنب التالي:

  • محاولة الوصول إلى خاصية key في المكون الفرعي.
  • محاولة استخدام خاصية key لشيء آخر غير الغرض المقصود منها.

وأرجو تعديل الكود كالتالي من أجل طباعة قيمة friends:

const Friend = ({ friendId, name, subtitle, userPicturePath }) => {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { user } = useSelector((state) => state.user);
    const token = useSelector((state) => state.token);
    const friends = useSelector((state) => state.user.friends);

console.log(friends)

//باقي الكود

وكرر نفس الأمر في  FriendsList.jsx

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 5 ساعة قال Mustafa Suleiman:

المشكلة في ملف Fiend.jsx، وأيضًا هناك مشكلة وهي أن خاصية key هي خاصية خاصة تستخدمها React لتتبع وتحديث قوائم المكونات بكفاءة، ولا يمكن استخدام خاصية key كخاصية عادية في المكونات.

لذلك تجنب التالي:

  • محاولة الوصول إلى خاصية key في المكون الفرعي.
  • محاولة استخدام خاصية key لشيء آخر غير الغرض المقصود منها.

وأرجو تعديل الكود كالتالي من أجل طباعة قيمة friends:

const Friend = ({ friendId, name, subtitle, userPicturePath }) => {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { user } = useSelector((state) => state.user);
    const token = useSelector((state) => state.token);
    const friends = useSelector((state) => state.user.friends);

console.log(friends)

//باقي الكود

وكرر نفس الأمر في  FriendsList.jsx

أخي جربت حلك وهذه طباعة الكونسول في لصورة المرفقة ،

المشكلة أن دالة find تعمل مع المصفوفات فقط وحسب ماظهر في الكونسول أن friends عبارة عن أوبجكت والمفترض بها أن تكون مصفوفة كما عرفتها في الـ User model

ماذا أفعل لأجعلها مصفوفة أو ماالذي يجعل المتصفح يقرأها كأوبجكت

 

friend error.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...