javascript شرح - تعديل صحيح لصفائف الحالة في ReactJS




ماهو ترجمة (5)

أريد إضافة عنصر إلى نهاية مصفوفة state ، هل هذه هي الطريقة الصحيحة للقيام بذلك؟

this.state.arrayvar.push(newelement);
this.setState({arrayvar:this.state.arrayvar});

أنا قلق من أن تعديل الصفيف في المكان مع push قد يسبب مشاكل - هل هو آمن؟

البديل من صنع نسخة من مجموعة ، و setState جي التي تبدو مهدرة.


Answers

أسهل ، إذا كنت تستخدم ES6 .

initialArray = [1, 2, 3];

newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4]

سيكون الصفيف الجديد [1,2,3,4]

لتحديث حالتك في React

this.setState({arrayvar:[...this.state.arrayvar, newelement]});

معرفة المزيد حول تدمير المجموعة


أبسط طريقة مع ES6 :

this.setState(prevState => ({
    array: [...prevState.array, newElement]
}))

كما ذكر nilgun @ في التعليق ، يمكنك استخدام مساعدين immutability رد فعل. لقد وجدت هذا ليكون مفيدا للغاية.

من المستندات:

دفعة بسيطة

var initialArray = [1, 2, 3];
var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]

initialArray لا يزال [1 ، 2 ، 3].


يقول كتاب React docs :

علاج هذا. الدولة كما لو كانت غير قابلة للتغيير.

سيؤدي دفعتك إلى تحور الدولة بشكل مباشر ومن المحتمل أن يؤدي ذلك إلى ظهور رمز عرضة للخطأ ، حتى إذا كنت "تعيد" تعيين الحالة مرة أخرى بعد ذلك. F.ex ، قد يؤدي ذلك إلى عدم تشغيل بعض أساليب دورة الحياة مثل componentDidUpdate .

النهج الموصى به في إصدارات React اللاحقة هو استخدام وظيفة المحدث عند تعديل الحالات لمنع حالات السباق:

this.setState(prevState => ({
  arrayvar: [...prevState.arrayvar, newelement]
}))

ذاكرة "النفايات" ليست مشكلة مقارنة بالأخطاء التي قد تواجهها باستخدام تعديلات الحالة غير القياسية.

صيغة بديلة لإصدارات React السابقة

يمكنك استخدام concat للحصول على بنية نظيفة حيث تقوم بإرجاع صفيف جديد:

this.setState({ 
  arrayvar: this.state.arrayvar.concat([newelement])
})

في ES6 ، يمكنك استخدام مشغل Spread :

this.setState({
  arrayvar: [...this.state.arrayvar, newelement]
})

ES6 وبدون طفرة: (أكتوبر 2016)

const removeByIndex = (list, index) =>
  [
    ...list.slice(0, index),
    ...list.slice(index + 1)
  ];

ثم :

removeByIndex([33,22,11,44],1) //=> [33,11,44]




javascript reactjs