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

Question

当我设置修改我的redux存储initial_state对象的initial_state对象时。

以下是我的复古店：

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"}。

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

就连我都不派人去.

但它还是修改了我在redux商店的intial_state，为什么？

谢谢各位..。

Answer 1

语句1:

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

语句2:

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

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

但,

this.setState({address:address}) 

不是从语句2更新address变量，而是从语句1更新address，这是redux中对address state的引用。这就是为什么您的redux存储值正在更新。

Answer 2

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

而且，我也不会存储像这个this.state = {address:this.props.address};这样的道具的参考资料。相反，将this.state用于表单值的临时存储，然后通过操作将其传递给表单提交上的存储。

刚开始在Stack Overflow中伸出援手，所以请告诉我，如果我对任何信息不清楚，或者可能有进一步的帮助:)