وظائف الربط في تكرارات خريطة React

بيان المشكلة

عند استخدام وظيفة الخريطة في React، قد يواجه المطورون الخطأ، "TypeError: Cannot قراءة خاصية غير محددة." يحدث هذا الخطأ عندما يتم استدعاء طريقة معينة، مثل onPlayerScoreChange، داخل وظيفة الخريطة، ولكن لم يتم ربطها بشكل صحيح.

فهم التسلسل الهرمي للمكونات

في تطبيق React المحدد، يتم تنظيم تدفق البيانات والتسلسل الهرمي للمكونات على النحو التالي:

• المكون الرئيسي: يتفاعل التطبيق مع مكون الحفيد ويتعامل مع طريقة onPlayerScoreChange.
• الطفل المكون: يتلقى اللاعب البيانات من الجد ويمررها إلى مكون الحفيد.
مكون الحفيد:
• يعالج العداد إدخالات المستخدم ويتفاعل مع طريقة onPlayerScoreChange في المكون الجد.
وظائف الربط لوظائف الخريطة

ينشأ الخطأ لأن طريقة onPlayerScoreChange غير مرتبطة بشكل صحيح داخل وظيفة الخريطة في المكون الجد. يعد الربط ضروريًا عند استخدام الوظائف ضمن تكرارات الخريطة حيث يختلف سياق وظيفة الخريطة عن سياق مكون React. وبالتالي، فإن هذا داخل وظيفة الخريطة لا يشير إلى مكون React، مما يسبب مشكلات في الوصول إلى خصائصه.

هناك طريقتان شائعتان لحل هذه المشكلة:

استخدام وظائف السهم

تربط وظائف الأسهم ضمنيًا سياق المكون. في هذه الحالة، الكود التالي سيحل الخطأ:

{this.state.initialPlayers.map((player, index) => {
                return(
                    
                )
            })}

هناك طريقة أخرى تتمثل في ربط الوظيفة بشكل صريح باستخدام طريقة الربط. يمكن تحقيق ذلك عن طريق تمرير هذا السياق للمكون كوسيطة لطريقة الربط:

{this.state.initialPlayers.map(function(player, index) {
                return(
                    
                )
            })}