更改部分数据后重新渲染状态-reactjs

Question

I have state here of list which contains an array of objects:

this.state = {
  list: [{test: 2}, {test33: 4}]
}

I created a function to change the number (2nd value in the object) if I found an identical name (1st value in the object). However I am not sure how can I re-render my component then to see my updated state.

updateData(item1, item2){
    if (!item1 || !item2) {
      return 'Enter valid item1 or item2 to add item';
    }

    var hasBeenFound = false;

    this.state.list.forEach(function (item) {
        if (item.item1 === item1) {
            hasBeenFound = true;
           item.item2 = item2;
        }
    });

    if(!hasBeenFound){
      this.setState((prevState) => ({
        list: prevState.list.concat({item1: item1, item2: item2})
      }));
    }

  }

For some reason even though it found some identical item1 it wont re-render the item2 even though I asign it to the new value. Do i need to use lifecycle function? Please help! newbie here!

Answer 1

The problem this code mutates (changes in place) state specifically this line item.item2 = item2;

this.state.list.forEach(function (item) {
        if (item.item1 === item1) {
            hasBeenFound = true;
           item.item2 = item2;
        }
    });

The reason forEach passes a reference to each object of the array, so any change to this object changes original array (and thus changes state).
Better approach is to use setState method like this

 if(this.state.some(item => item.item1 === item1){
    hasBeenFound = true;
    this.setState(prevState => ({
       list: prevState.list.map(item => {
         if(item.item1 === item1) return {...item, item2: item2};
         return item;
       })
 }

This code can be improved more, i've just added the minimum change that will make it work.