时间戳

首页 > 解决方案 > 使用动态键和对象值反应 setState 未按预期工作

javascript - 使用动态键和对象值反应 setState 未按预期工作

问题描述

我遇到了 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的支持，我非常感谢。

标签： javascriptreactjsdynamicimmutabilitysetstate

解决方案

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

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

所以只有一个handleChange方法的'instances'被所有'instances'共享，这是一种错误的方法。为了解决这个问题，我像这样修改了 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>
           );
       }
    }

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

推荐阅读