React setState on mirrored states

Question

this.state = {
   old: null,
   new: null
}

componentDidMount() {
  // get data
  this.setState({old: data, new: data})
}

updateData() {
  // some code
  this.setState({new: newData})
}

Above code updates both old and new inside updateData() what i want is to get data and store in 2 different variable (old & new), update new with user input and compare/send to server etc..

EDIT: Input change part

<label for="pname">
  Min: {this.state.old.parameters[i][1]}
</label>
<input
  name={"p-" + item[0]}
  className="form-control"
  value={this.state.new.parameters[i][1]}
  onChange={e => this.handleChange(e, i, 1)}
/>

Handle Change:

handleChange(e, i, x) {
  let temp = this.state.new;
  temp.parameters[i][x] = e.target.value;
  this.setState({ new: temp });
}

EDIT: Here is a simple example to describe my issue. When you change first input all other inputs are also changing where they shouldn't

codesandbox

That code doesn't do what you describe. Please show an example that replicates the problem ([mcve]). Best guess is that `data` is an object or an array and you change the elements directly instead of cloning it first. — Guy Incognito, Jun 22 '20 at 07:17
that's it, i mean it updates both states even i only put `new` inside setState function — ggnoredo, Jun 22 '20 at 07:21
Like I suspected, when you do `let temp = this.state.new` and then change `temp`, it changes the original `this.state.new` which is the same as `this.state.old`. You need to do `let temp = { ...this.state.new }` to clone the object so changing it won't change the original. — Guy Incognito, Jun 22 '20 at 07:32
@GuyIncognito still same, it changes `old` even though there is no statement to do that — ggnoredo, Jun 22 '20 at 07:40
And you have to do the same to all nested objects. See https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript — Guy Incognito, Jun 22 '20 at 07:42

Sagar Kulkarni · Answer 1 · 2020-06-26T16:43:45.820

0

Upon setState call, the original contents have to be retained too, which can be done by using {...this.state,//and any parameter changes(such as new:newData etc)}. Also, the issue was regarding Shallow and Deep copying of objects in js. Assigning objects, for example - let temp={...this.state.new} makes Shallow copy of the object and the both references point to the same object! I have made necessary changes, hope it works!

Handle Change :

handleChange(e, i, x){
    let temp = JSON.parse(JSON.stringify(this.state));
    temp.new.parameters[i][x] = e.target.value;
    this.setState({...this.state, new: temp.new});
};

Update Data function call :

updateData(){
    // some code
    this.setState({...this.state, new: newData});
}

edited Jun 26 '20 at 16:43

answered Jun 22 '20 at 08:16

Sagar Kulkarni

483
4
15

no it doesn't work and i still can't understand why it changes other `old` state when i setState only for `new` state – ggnoredo Jun 22 '20 at 09:53
Then there surely is some logic flaw......please go through your code thoroughly – Sagar Kulkarni Jun 22 '20 at 10:15
I uploaded all code here: https://bin.privacytools.io/?10da25e76bd2e517#QgsqEQJPh20VpurDs5ii7ZMAJ1F3ibvRSCrbM7jTrhU= – ggnoredo Jun 22 '20 at 10:44
Okay will check – Sagar Kulkarni Jun 22 '20 at 11:11
i edited my question to include a simple codesandbox example with the very same issue – ggnoredo Jun 22 '20 at 14:13

React setState on mirrored states

1 Answers1