Задать вопрос
@mamaanarhiya
react

Зачем в React так записывают в state?

Для чего нужна такая запись?
this.setState({
      ...this.state,
      some_data: {
        ...this.state.some_data,
        ...input,
      },
    });

Чем она отличается от такой?
this.setState({
      some_data: {
        ...input,
      },
    });


да и зачем нужны эти многоточия?
  • Вопрос задан
  • 1939 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Во-первых в setState в корень предыдущее состояние передавать не нужно, так под капотом к нему так и так подмешается предыдущее состояние, в не зависимости от того, что вы туда передадите. Примерно так:
state = { ...prevState, ...newState };

Во-вторых не правильно передавать в setState this.state, так как setState выполняется асинхронно и ваше текущее состояние может успеть измениться. Если надо обновить состояние на основе предыдущего, в setState по-хорошему надо передавать функцию, в которую первым аргументом при вызове придет ваше состояние:
this.setState(prevState => ({
  some_data: {
    ...prevState.some_data,
    ...input,
  },
});
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
dasha_programmist
@dasha_programmist
ex Software Engineer at Reddit TS/React/GraphQL/Go
создается shallow-copy объекта, то есть оператором "..." (spread operator) копируются свойства объекта, это сделано для того чтобы не терять данные при обновлении одного свойства
допустим у тебя был объект состояния такой структуры
let state = {
  x:1,
  y:2,
  z:3
}

ты хочешь изменить поле y, для этого тебе нужно скопировать все поля и переназначить y
state = { ...state, y:25};
другой вопрос зачем копировать, если можно мутировать (MobX), это фишка называется иммутабельность (Redux), чтобы понять изменилось ли состояние быстрее проверить изменилась ли ссылка на объект, чем делать полный diff, в angular next такая штука в детекторе включается через ChangeDetectionStrategy.OnPush
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать дизайн 3-х сайтов на Tilda
19 апр. 2024, в 16:22
30000 руб./за проект
Прототип, дизайн и верстка лендинга на Тильде
19 апр. 2024, в 16:18
19000 руб./за проект
Спарсить + Создать бота + Сделать рассылку в Telegram
19 апр. 2024, в 16:15
5000 руб./за проект
Ещё заказы