«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Как обновить вложенный объект в состоянии с помощью setState?

Как обновить вложенный объект в состоянии с помощью setState?

Опубликовано 17 ноября 2024 г.
Просматривать:176

How to Update a Nested Object in State Using `setState`?

Обновить state.item[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)
    ]
}));

Примечание. В этих примерах мы предполагали, что элементы представляют собой массив. Если бы items был объектом, вы бы внесли аналогичные обновления в свойства объекта.

Помните, что при использовании setState вам всегда следует делать копию предыдущего состояния, прежде чем изменять его, чтобы избежать случайной мутации. исходный объект состояния.

Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3