将 prevstate 参数添加到 this.setState 导致 typeError

Question

我正在更新 onchange 状态。 setState 在没有提供 prevstate 的情况下工作，但当然没有写入其余的状态值。但是当我在 prevstate 中添加时，我得到了这个错误：

TypeError: Cannot read property 'name' of undefined

  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}`]
        }
      }))
    }
  }
}

Answer 1

setState 是异步的，这意味着 i 的值可能在 setState 运行时已经改变。这也意味着 this.state 可能不包含每次迭代的更新值。例如，当您检查名称的费率是否为真时：

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

可能之前的迭代将值设置为 true 但反应尚未更新 this.state。

与其在循环内更新状态，不如尝试构建新状态并在循环外仅更新一次。

使用 forEach 循环为每次迭代创建一个新的范围，并确保 setState 运行时 input 具有相同的内容。

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);
}

将 prevstate 参数添加到 this.setState 导致 typeError

Adding prevstate parameter to this.setState causes typeError

javascript

state

typeerror

setstate

reactjs

handleChange 函数：