如何避免以正确和高性能的方式改变React中的局部状态

Question

I´m new in React and I´m trying to learn more about state immutability. The shape of my state property is an object which can have one or several properties holding an array of objects.

I created a handler in my class for when the user clicks on the div.

  clickDivHandler = (stateProperty, id) => {
    let newArray = [...this.state[stateProperty]];
    let selectedObject = newArray.filter(element => element.id === id)[0];
    selectedObject['new property'] = 'value for new property';

    newArray = newArray.filter(element => element.id !== id);

    console.log([...newArray, selectedObject]);
  }

Basically when the user clicks on the div, the function passes the stateProperty (which holds and array of objects) and the id of that object.

Then I created a new array for that property to avoid mutating the original one.

Then I filter out the object with that particular id from the array

Then I create a new property in the object assigned to selectedObject

Then I remove from the new array the object with that id

Then I log a new array containing the other objects and the new one.

I´m new and I dont know if this is the right way or if Im mutating or committing any mistake.

I will appreciate any advice.

Answer 1

You mutated selectedObject here selectedObject['new property'] = 'value for new property';

To fix that you would need to do something like this: console.log([...newArray, { ...selectedObject }]);

Some things I would suggest improving:

• div is not a clickable element semantically. react should complain about that in console.
• learn how to use redux
• work on better handler naming (handleSomeAction, onSomeAction etc.)
• I would suggest using reduce fn in your use case.

// rough example
this.state[stateProperty].reduce((acc, el) => {
  if (el.id === id) {
    acc.push({ ...el, new: 'value for new property' })
  } else {
    acc.push(el);
  }
  return acc;
}, [])

Explore these libs:

• redux
• lodash
• reselect