时间戳

首页 > 解决方案 > 将 prevstate 参数添加到 this.setState 会导致 typeError

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

问题描述

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

TypeError：无法读取未定义的属性“名称”

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

标签： javascriptreactjsstatetypeerrorsetstate

解决方案

setState是异步的，这意味着 的值i可能会随着时间的推移而改变setState。这也意味着this.state在每次迭代中可能不包含更新的值。例如，当您检查名称的汇率是否为真时：

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

之前的迭代可能将该值设置为 true，但 react 尚未更新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);
}

推荐阅读