Учебный курс по React, часть 25: практикум по работе с формами

[lintoniel]

Последний пункт было немного сложновато, потому что я изначально думала, что у нас будет массив, в который мы будем пушить отмеченные значения (по аналогии с Vue), но реализовать его не получилось

[visifaka]

Хотелось бы все такие узнать как обойти ошибку в последнем пункте где в state используется объект dietaryRestrictions, возможно кто-то из присутствующих знает как?

[chaynikz]

Для того чтобы правильно обновлять содержимое объекта dietaryRestrictions, можно воспользоваться функциональной формой setState

А как именно это сделать? У меня что-то никак не получается.

[chaynikz]

Порылся немного в интернете и вот что нашел по этому вопросу.

например, можно решить так:

this.setState(prevState => {
    prevState.dietaryDestrictions[name] = checked;
    return prevState;
});

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

this.setState(prevState => ({
    dietaryDestrictions: {
        ...prevState.dietaryDestrictions,
        [name]: checked
    }
}));

выглядит немножко странновато, но логика вроде понятна.

Я вот только так и не пойму, зачем здесь использовать именно функциональный setState.
Попробовал сделать без него, и вроде бы тоже все работает:

this.setState({
    dietaryDestrictions: {
        ...this.state.dietaryDestrictions,
        [name]: checked
    }
})

или даже так:

const dietaryDestrictions = this.state.dietaryDestrictions;
dietaryDestrictions[name] = checked;
this.setState({ dietaryDestrictions: dietaryDestrictions });

очень надеюсь, что кто-нибудь разъяснит всю эту ситуацию, как же все-таки делать правильно?