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

Posted 2023-02-22

【中文标题】将 prevstate 参数添加到 this.setState 会导致 typeError

【英文标题】：Adding prevstate parameter to this.setState causes typeError

【发布时间】：2019-03-20 12:24:03

【问题描述】：

我正在更新状态 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 函数：

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

【问题讨论】：

错误Cannot read property 'name' of undefined ，嗯，错误来自这个[inputs[i].name]: true，你检查了吗？

删除这行代码 var inputs = document.getElementsByTagName('input') 改为使用 refs 访问标签 dom 节点，如下所示： if(inputs[i].refs.checked && this.state. rate.inputs[i].refs.name !== true ) 在您的输入标签上添加 ref="name"。

【参考方案1】：

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