Почему не сетается отдельное свойство стейта?

Question

[DonorOfLove]

*код немного упрощен для читаемости*

есть стейт:

[user,setUser]=React.useState({
        name: 'noName',
        pull: [{},{},{}],
    })

есть компонент:
<Hero addToCamp={() => addToCamp()/>)
который при клике вызывает функцию которая должна сетать только pull:

const addToCamp = () => {
            let newHeroes= ...
            setUser({pull: newHeroes}) // Что тут не так?..
        }
    }

Вопрос: я тупой или сани не едут? Объясните недалекому - почему так, почему при сете newHeroes затирает весь стейт. Я посмотрел несколько ресурсов, везде описан только такой метод сета отдельного свойства, да, можно было бы создать копию юзера, затем заменить в нем нужное свойство и эту копию уже засетать, но по мне так это не совсем валидно. Буду рад вашей помощи :3

Comments

[Алексей Абрамов]

можно было бы создать копию юзера, затем заменить в нем нужное свойство и эту копию уже засетать

Так и нужно делать, разворачиваешь объект юзер и меняешь нужное поле.

setUser(prevState => ({ ...prevState, pull: newHeroes}));

Answer 1

[Alexandroppolus]

В классовых компонентах this.setState поверхностно подмерживал переданное значение в стейт. В хуке - просто заменяет, и мержить надо вручную, например через спреды. Так мир устроен. В классе стейт только один, а useState может быть несколько. Например, здесь можно было бы сделать useState для name и useState для pull

Comments

[DonorOfLove]

понял, спасибо за ответ! Ну да, я так и думал, что можно сделать копированием, либо для каждого свойста свой стейт создавать, то это совсем уж дико, а если свойств будет 100? совсем ужс получится

[Alexandroppolus]

DonorOfLove,

а если свойств будет 100?

тогда, скорее всего, надо декомпозировать компонент на более мелкие.

[DonorOfLove]

Alexandroppolus, верткий вы, однако...

[Alexandroppolus]

DonorOfLove, разбиение этого огромного компонента на маленькие принесет 2 пользы:
1) более понятный код
2) оптимизацию реактовских ререндеров. Сейчас изменение любого из этих 100 свойств перерисовывает весь компонент. С декомпозицией ререндер будет более точечным.