React js setState({}) 修改redux中的数据直接存储初始对象答案

【问题标题】：React js setState({}) modifies data in redux stores initial object directlyReact js setState({}) 修改redux中的数据直接存储初始对象
【发布时间】：2017-09-07 07:30:17
【问题描述】：

当我设置 this.props.setState() 时，它会修改我的 redux 存储的 initial_state 对象。

以下是我的 redux-store：

export const initial_state = {address:{firstName:"",lastName:""}}
export const store = createStore(reducers,Object.assign({},initial_state));

在我的组件内部

class AddressForm extends React.Component{


constructor(props){
super(props)
this.state = {address:this.props.address};
this.onAddressChange = this.onAddressChange.bind(this);
}
  onAddressChange(e){
   let address = Object.assign({},this.state.address);
     address["firsName"].value = e.target.value;
     this.setState({address:address})
  }
  render(){
     console.log(this.props.address);
      return(...having input field with onChange=
                {this.onAddressChange}....)
   }
}

function mapStateToProps(state){
  return({
     address:state.address
  });
}
export default connect()(AddressForm);

根据控制台中的上述代码，我正在从 redux 商店打印this.props.address，这会将值打印为{firstName:"Typed in text box"}

实际上，我只是通过创建新地址对象并仅修改该状态值来修改组件的状态。

即使我没有调度任何 redux 事件...

但它仍然会修改我在 redux 商店中的 intial_state 为什么？

提前谢谢各位.....

【问题讨论】：

标签： javascript node.js reactjs ecmascript-6 react-redux

【解决方案1】：

声明 1：

this.state = {address:this.props.address};你存储了storeaddress state的引用。

声明 2：

let address = Object.assign({},this.state.address);

您正在创建干净的副本并存储在address。

但是，

this.setState({address:address})

不是从 Statement 2 更新 address 变量，而是从 Statement 1 更新 address，它是来自 redux store 的 address state 的引用。这就是为什么你的 redux 存储值会更新。

【讨论】：

但是在connect中，他并没有指定mapStateToProps，虽然他已经写好了。
@AjayGaur 我说的是this.props.address}，它最初是未定义的，因为他在connect 中没有通过mapStateToProps
我没听懂。我不知道他是如何运行代码的。在address["firsName"].value = e.target.value;，它应该给他错误can't read value of undefined

【解决方案2】：

我已经有一段时间没有反应了，但首先引起我注意的是mapStateToProps应该传递给connect的初始调用。我敢打赌，如果你在构造函数中做了一个console.log(this.props.address)，它会打印出undefined。

另外，我不会存储对 this.state = {address:this.props.address}; 这样的道具的引用。而是使用 this.state 临时存储表单值，然后通过操作将其传递给表单提交时的存储。

刚开始在 Stack Overflow 上伸出援手，所以如果我不清楚任何事情，请告诉我，或者可以提供进一步的帮助 :)

【讨论】：