Question

我遇到了react方法（setState）的问题，希望能对您有所帮助。

我有一个handleChange方法，该方法使用动态键在状态中“持久”存储数据。我看起来像这样：

handleChange = (event, group) => {
  event.persist(); //Used to avoid event recycling.
  this.setState(
    prevState => ({
      ...prevState,
      [group]: { ...prevState[group], [event.target.name]: event.target.value }
    }),
    () => console.log("state", this.state)
  );
};

当使用提到的handleChange方法在我的自定义组件中只有一个“实例”时，此方法效果很好。当我想使用该方法使用多个组件时，问题就开始了，因为调用该方法时，它会覆盖prevState值。例如：

初始状态：{mockedValue:'Im here to stay'}

然后我为组'alpha'调用handleChange，以添加到该值{name:a}，

下一个状态：{alpha:{name:a},mockedValue:'Im here to stay'}

然后我为组'beta'调用handleChange，以添加到该值{otherName:b}，

预期状态：{alpha:{name:a}, beta:{otherName:b},mockedValue:'Im here to stay'}

下一个状态：beta:{otherName:b},mockedValue:'Im here to stay'}

不知道为什么会这样，也许是我误解了一些概念，事实是我不知道为什么这没有按预期工作，（也许是因为计算出的名称值，但不确定。）你知道如何解决这个问题吗？

感谢您的阅读！：）

更新沙箱中的代码：https://codesandbox.io/s/v3ok1jx175

更新2：已解决

感谢您的支持 Thollen 和 DevSerkan ，我非常感谢。

Answer 1

问题是我有错误级别的handleChange事件...这意味着我正在子Componet中定义handleChange方法，例如：

    class Parent extends React.Component {
      render(){
        return( 
           <div>
             <Child/>
             <Child/>
             <Child/>
           </div>
    );
   }
}

因此，所有“实例”共享一个handleChange方法的“实例”，这是错误的方法。为了解决这个问题，我像这样修改了Parent：

class Parent extends React.Component {
       handleChange(){
       //updateState Operations here...
      }             
          render(){
            return( 
               <div>
                 <Child handleChange = {this.handleChange}/>
                 <Child handleChange = {this.handleChange}/>
                 <Child handleChange = {this.handleChange}/>
               </div>
           );
       }
    }

通过这种方式，我消除了处理从“顶级子级”到使用子级组件的父级的责任。

用动态键和对象值反应setState不能按预期工作

1 个答案: