React-native-router-flux: تلقي تحذير "يتم إعادة استخدام حدث اصطناعي" عند التنقل بين المشاهد باستخدام رمز عينة إعادة

تم إنشاؤها على ٢٧ أكتوبر ٢٠١٦  ·  11تعليقات  ·  مصدر: aksonov/react-native-router-flux

إصدار

أخبرنا بالإصدارات التي تستخدمها:

  • رد فعل - جهاز التوجيه الأصلي - تدفق v3.36.0
  • رد فعل أصلي v0.35.0

سلوك متوقع

يجب أن يعمل التنقل من مشهد إلى آخر باستخدام مثال redux بدون تحذير أداء React

السلوك الفعلي

تلقي التحذير التالي عند التنقل بين المشاهد باستخدام نموذج الشفرة المقدم: "تحذير: يتم إعادة استخدام هذا الحدث التركيبي لأسباب تتعلق بالأداء. إذا كنت ترى هذا ، فأنت تصل إلى الخاصية" type "في حدث اصطناعي تم إصداره / تم إلغاؤه. تم تعيين هذا على قيمة خالية. إذا كان عليك الاحتفاظ بالحدث الاصطناعي الأصلي ، فاستخدم event.persist (). "

خطوات التكاثر

  1. نفِّذ نموذج التعليمات البرمجية للإعادة الموجودة هنا ، بما في ذلك ما يلي في المكون الأول:
<Text onPress={Actions.home}>Go home</Text>
  1. قم بتشغيل التطبيق واضغط على Go home
  2. التطبيق موجه إلى home view ، ولكن تظهر العديد من التحذيرات مع النص أعلاه

glass_and_iphone_6s_ _ios_10_0__14a345_

التعليق الأكثر فائدة

joeferraroAlmouro - لقد وجدت أن تغيير من

onPress={Actions.otherScene}

إلى

onPress={() => Actions.otherScene()}

تمت إزالته مع هذه الأخطاء.

ال 11 كومينتر

joeferraro أنا أرى هذا أيضًا - هل لديك أي حظ في معرفة ما كان يحدث؟

أرى نفس الشيء:

joeferraroAlmouro - لقد وجدت أن تغيير من

onPress={Actions.otherScene}

إلى

onPress={() => Actions.otherScene()}

تمت إزالته مع هذه الأخطاء.

شكرًا jamielob ، كانت هذه مشكلة بالنسبة لي أيضًا. :)

شكرا jamielob.

أتساءل لماذا يستخدم البرنامج التعليمي المصغر onPress={Actions.Foo} بدلاً من ذلك. هل يمكن أن يكون هناك سبب لذلك؟

screen shot 2017-01-30 at 4 14 27 pm

اقتراح جميلوب إصلاح الخطأ بالنسبة لي.

Noob هنا ، على الرغم من ذلك ، ما يحدث بشكل مختلف تحت الغطاء عندما تقوم بتمريره بوظيفة مجهولة مقابل مرجع فعلي.

في حال واجه أي شخص آخر هذا الخطأ ولم يعمل ما سبق ، فقد صادفته لأنني مررت الوسيطة الأولى من onSubmitEditing على <TextInput> إلى دالة مثل:

<TextInput
  onSubmitEditing={(text) => this.performSearch(text)} // Should be event, not text
/>

متغير النص هذا هو في الواقع حدث الإرسال وهو ما انتهى بإعطائي الرسالة أعلاه وتصحيح أخطاء الصداع لفترة من الوقت.

event.preventDefault () ،
event.stopPropagation () ،

أعتقد أن المشكلة هي أنك تحاول الوصول إلى كائن الحدث بعد تحريره وإعادة تعريفه.

React Docs => تم تجميع الحدث SyntheticEvent. هذا يعني أنه سيتم إعادة استخدام كائن SyntheticEvent وسيتم إبطال جميع الخصائص بعد استدعاء رد نداء الحدث. هذا لأسباب تتعلق بالأداء. على هذا النحو ، لا يمكنك الوصول إلى الحدث بطريقة غير متزامنة.

إذا كنت بحاجة إلى استخدام سمة من كائن الحدث ، فسيتعين عليك الوصول إليها على هذا النحو

function displayForm(event){
    console.log(event) // will error
    console.log(event.type) will work
    const eventType = evnet.type; 
   // or call event.persist();

إذا كنت ترغب في الوصول إلى خصائص الحدث بطريقة غير متزامنة ، فيجب عليك استدعاء event.persist () في الحدث ، والذي سيؤدي إلى إزالة الحدث التركيبي من التجمع والسماح بالاحتفاظ بالإشارات إلى الحدث بواسطة رمز المستخدم.

لست متأكدًا مما إذا كان سبب هذه المشكلة قد تم شرحه بوضوح ، لذا يُرجى السماح لي بمشاركة فهمي وكيفية إصلاحه.

يعرّف TouchableWithoutFeedback onPress?: (event: GestureResponderEvent) => void; .

وبالتالي ، عند تقديم اسم الوظيفة ببساطة ، فإن المعلمة التي يتم تمريرها هي GestureResponderEvent - وهناك فرصة جيدة أن هذا ليس ما تتوقعه.

من خلال التغيير من اسم الوظيفة إلى وظيفة مجهولة تستدعي وظيفتك (على سبيل المثال () => yourFunction() ) ، لا يتم تمرير GestureResponderEvent إلى وظيفتك.

يا رفاق واجهت هذه المشكلة على الملاح.

Screen.navigationOptions=({navigation})=>{
const handleEditButton=navigation.navigate.bind(this,"EditProduct")
return {
    headerTitle:"My Products",
    headerRight:<CustomHeaderButton 
    iconName="ios-add"
    title="Add"
    iconSize={26}
    color={colors.bright}
    onPress={handleEditButton}
    />
}
}

انتبه إلى الطريقة التي استخدمتها. كنت أحاول ربط طريقة التنقل. (نعم اعرف)

const handleAddButton=()=>navigation.navigate("EditProduct")

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

vinayr picture vinayr  ·  3تعليقات

GCour picture GCour  ·  3تعليقات

fgrs picture fgrs  ·  3تعليقات

xnog picture xnog  ·  3تعليقات

sarovin picture sarovin  ·  3تعليقات