Добавление параметра prevstate в this.setState вызывает typeError - PullRequest
Новая
       25

Добавление параметра prevstate в this.setState вызывает typeError

0 голосов
/ 16 октября 2018

Я обновляю состояние onchange.setState работал без предоставления prevstate, но, конечно, не записывал значения остальных состояний.Но когда я добавил в prevstate, я получил эту ошибку:

TypeError: Невозможно прочитать свойство 'name' из неопределенного 

  110 | if(inputs[i].checked && this.state.rates[`${inputs[i].name}`] !== true ) {
  111 |   this.setState(prevstate=>({
  112 |     ...prevstate,
> 113 |     rates: {
      | ^  114 |       ...prevstate.rates,
  115 |       [inputs[i].name]: true
  116 |     }

Я не знаю, что вызываетэтот.Вот состояние и моя функция handleChange: 

this.state={
  rawnew:[],
  rawold:[],
  posts: [],
  count: 0,
  report: false,
  rates: {}
}

Функция handleChange: 

handleChange = (e) => {
  var inputs = document.getElementsByTagName('input')
  console.log(this.state)
  for (var i = 0; i < inputs.length; i++) {
    console.log(i, inputs[i].name)
    if (inputs[i].checked && this.state.rates[`${inputs[i].name}`] !== true) {
      this.setState(prevstate => ({
        ...prevstate,
        rates: {
          ...prevstate.rates,
          [inputs[i].name]: true
        }
      }))
    } else if (this.state.rates[`${inputs[i].name}`] !== undefined && this.state.rates[`${inputs[i].name}`] !== inputs[i].checked) {
      this.setState(prevstate => ({
        rates: {
          ...prevstate.rates,
          [inputs[i].name]: !prevstate.rates[`${inputs[i].name}`]
        }
      }))
    }
  }
}

1 Ответ

0 голосов
/ 16 октября 2018

setState является асинхронным, что означает, что значение i могло измениться к моменту запуска setState.Это также означает, что this.state может не содержать обновленных значений на каждой итерации.Например, когда вы проверяете, является ли показатель для имени истинным:

this.state.rates[`${inputs[i].name}`] !== true

Возможно, что на предыдущей итерации было установлено значение true, но реакция не обновилась this.state пока нет.

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

Используйте цикл forEach, который создает новую область видимости для каждой итерации и гарантирует, что input будет иметь одинаковое содержимое ко времени выполнения setState. 

handleChange = (e) => {
    // see Jesse's comment about using refs
    var inputs = document.getElementsByTagName('input'); 
    const newState = { ...this.state, rates: ...this.state.rates };

    inputs.forEach(input => {
        const { checked, name } = input;
        newState.rates[name] = checked;
    });

    this.setState(newState);
}
...