تحديث حالة ReactJS العميقة
-
20-12-2019 - |
سؤال
لدي مجموعة من العناصر في حالة مكون ReactJS التي أقوم بتكرارها لإنشاء نموذج.سؤالي هو:كيف أقوم بتحديث هذه العناصر بشكل أفضل عندما تتغير الحقول؟
على سبيل المثال:
var items = this.state.foo.bar.items.map(function(item, i) {
return <input value={item.baz} onChange={??}
});
كيف سيبدو معالج onChange الخاص بي في هذه الحالة؟هل أقوم بتغيير item.baz
الملكية مباشرة، ثم this.setState(state)
؟يبدو خطأ.أنا أنظر إلى رد فعل المساعدين ثبات, ، ولكن انظر كيفية العمل مع فهارس المصفوفة.
شكرًا.
المحلول
يمكنك استخدام الفهرس لتحديث عنصر الصفيف الصحيح عن طريق تمريره إليه onChange
عبر bind
ومن ثم إنشاء الكائن ديناميكيًا لتمريره إليه update
:
var Hello = React.createClass({
getInitialState : function() {
return {
foo : {
bar : {
items : [ { baz : 1 }, { baz : 2 }, { baz : 3 } ]
}
}
};
},
onChange : function( idx, item, event ) {
var objForUpdate = { foo: { bar: { items : {} } } };
objForUpdate.foo.bar.items[ idx ] = { $set : { baz : event.target.value } };
var newData = React.addons.update( this.state, objForUpdate );
this.setState( newData );
},
render: function() {
var _this = this;
var items = this.state.foo.bar.items.map(function(item, i) {
return <input value={item.baz} onChange={_this.onChange.bind( _this, i, item )}></input>
});
return <div>{items}</div>;
}
});
أفهم أن هذا له ميزة فقط على شيء من هذا القبيل
onChange : function( idx, item, event ) {
item.baz = event.target.value;
this.setState( this.state );
}
إذا كنت تنوي تجاوز shouldComponentUpdate
وكن أكثر انتقائية بشأن وقت إعادة العرض أكثر من كل مرة this.setState()
يسمى.
نصائح أخرى
اعتقدت أنني سأطرح هذه المكتبة لأنها مصممة خصيصًا لحالة التفاعل المتداخلة بشدة،
https://github.com/mquan/cortex
يمكنك تحديث العناصر داخل كل مكون وسيتدفق ذلك تلقائيًا دون الحاجة إلى تحديد عمليات الاسترجاعات لتمرير الحدث.