Как обновить значение ключа состояния объекта?

Question

Я объявляю поле dateRangePicker в состоянии компонента, как показано ниже

dateRangePicker: {
  selection: {
    startDate: new Date(),
    endDate: new Date(),
    key: 'selection',
  },
}

более поздние изменения даты начала и окончания, как показано ниже

let startDate = "2019-04-16";
let endDate = "2019-05-16";

Но я не могу обновить эти значенияв состоянии после следующего блока кода

this.setState({
  dateRangePicker.selection.startDate : startDate,
  dateRangePicker.selection.endDate : endDate,
})

Я хочу обновить дату начала и окончания соответственно

Answer 1

Это не работает так, как вы показали.Это должно быть так:

this.setState(ps=>({
 ...ps,
 dateRangePicker:{
   ...ps.dateRangePicker, // Copy old data
   selection: {
      ...ps.dateRangePicker.selection, // Same here
      startDate: startDate
      endDate: endDate

    },
 }
}))

Мы используем функциональную форму из setState, потому что в какой-то момент вы можете видеть, что у нас есть доступ к данным из предыдущего состояния: ps.selection

Answer 2

что вы пытаетесь достичь, это изменить состояние глубокого / вложенного объекта в setState ..

const startDT = "new start date"
const endDT = "new end date"

this.setState(prevState => ({
 ...prevState,
 dateRangePicker: {
  ...prevState.dateRangePicker,
  selection: {
   ...prevState.dateRangePicker.selection,
    startDate: prevState.startDate = startDT,
    endDate: prevState.endDate = endDT,
  }
 }})
)

Или,

// copy without reference..
const dateRangePicker = { ...this.state.dateRangePicker }

dateRangePicker.selection = { 
 startDate: startDT,
 endDate: endDT,
}

this.setState({ dateRangePicker })

Answer 3

Состояние является неизменным объектом, поэтому вы не можете изменить его, но создать новый, поэтому с помощью выражения diff ... создайте новое состояние.