Как изменить состояние компонента с помощью setstate

Question

Реактив новичок здесь!

У меня есть компонент с состоянием, например:

this.state = {
  values: [],
  isloading: true,
  error: false,
  page: 1,
  next: null,
  score: 0,
  seconds: 120,
  finished: false,
  modalopened: false,
  currentcharacter: null,
};

Я изменяю состояние этого компонента в середине кода напрямую, вот так:

this.state.values[index_value].points = 5

И я получаю предупреждение, говорящее мне использовать "setState". но как я могу получить доступ к values[index].points, используя setState?

Заранее спасибо, vm

Answer 1

Вы никогда не должны изменять состояние напрямую.

То, что вы должны использовать, это способ обратного вызова setState.

this.setState(prevState => {
    let newValues = [...prevState.values]
    newValues[index_value].points = 5
    return { values: newValues }
})

Answer 2

Рекомендованный способ обновления состояния - через метод setState, конструктор является исключением из этого правила, где мы можем напрямую назначить состояние, например:

this.state = {
  values: [],
  isloading: true,
  error: false,
  page: 1,
  next: null,
  score: 0,
  seconds: 120,
  finished: false,
  modalopened: false,
  currentcharacter: null,
};

После этого назначения вы всегда должны использовать функцию setState для обновления состояния, если ваше обновление состояния зависит от предыдущего значения состояния, вы должны передать предыдущее состояние этой функции, то есть, увеличив число на 1, обновляя флаги true / false и т. Д. .

Answer 3

Предлагаю взглянуть на React DOCS перед началом кодирования.

В любом случае, правильный путь:

let arr = [...this.state.values]; // it clones your array without references
arr[index_value].points = 5; // modify only cloned array
this.setState({ values: arr }, () => console.log(this.state)); // set the new array in place of the old one