Как изменить state в React?

Question

[oskar barin]

Есть такой state , в нем многомерный объект

state = {
			data: {
				name: {value: name},
				mail: {value: email},
				text: 
					{value: { 
						title: subtitle,
						subtitle: subtitle,
						}
					},
			}
		}

Как прописать setState чтобы изменить data.text.value.title?

Comments

[Петр Мухуров]

не проще избавиться от лишних вложенностей?

state = {
  name,
  email,
  title: subtitle,
  subtitle
}

Answer 1

[hzzzzl]

this.setState(state => {
  const newState = { ...state }
  newState.data.text.value.title = 'new title'
  return newState
})

Comments

[Павел Антонов]

Краткость сестра таланта) этакий рефакторинг моему ответу))

Answer 2

[Павел Антонов]

так и менять

this.setState({
  data: {
    text: {
      value: {
        title: 'нужный тайтл'
      }
    }
  }
})

setState сравнит состояния и смёржит их, в итоге тайтл изменится а остальные данные останутся как были.


Извиняюсь не проснулся)) правильно будет так конечно-же

this.setState(prevState => ({
      data: {
        ...prevState.data,
        text: {
          ...prevState.data.text,
          value: {
            ...prevState.data.text.value,
            title: '1234'
          }
        }
      }
}))

Зачеркнул первый вариант ответа, для примера как делать НЕ нужно)

https://jsfiddle.net/2xe7vpa8/1/

суть в общем такая, что мы spread'ом копируем состояние объекта и изменяем нужный ключ. Ответ hzzzzl намного короче, но суть та же.

Comments

[Роман Александрович]

размечтался. https://jsfiddle.net/s276hnq8/ он перетрет стейт и засунет ровно то что ты ему скажешь

[Павел Антонов]

Роман Александрович, да да я ошибся) утро же)

[Павел Антонов]

уже пофиксил)

[hzzzzl]

кстати если не ошибаюсь, то видел npm пакет, который позволял так делать