تحديث الحالة [1] في الحالة باستخدام setState

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

إليك كيفية تحديثstate.item[1] باستخدام setState:

// 1. Make a shallow copy of the items
let items = [...this.state.items];

// 2. Make a shallow copy of the item you want to mutate
let item = {...items[1]};

// 3. Replace the property you're interested in
item.name = 'newName';

// 4. Put it back into our array. N.B. we *are* mutating the array here, 
//    but that's why we made a copy first
items[1] = item;

// 5. Set the state to our new copy
this.setState({items});

يمكنك دمج الخطوتين 2 و3 إذا كنت تريد:

let item = {
    ...items[1],
    name: 'newName'
}

أو يمكنك القيام بالأمر كله في سطر واحد:

this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));

ملاحظة: في هذه الأمثلة، افترضنا أن العناصر عبارة عن مصفوفة. إذا كانت العناصر كائنًا، فستقوم بإجراء تحديثات مماثلة لخصائص الكائن.

تذكر، عند استخدام setState، يجب عليك دائمًا عمل نسخة من الحالة السابقة قبل تعديلها لضمان عدم حدوث تحور عن طريق الخطأ كائن الحالة الأصلية.