React Native how to update items in a object-CodePudding

How do we correctly update an item in an object? I am trying to update the item isComplete = true or false basic on results from my db.response

If what I have is already correct can you please explain to me what is making it work

currently, I am using this.setState() which I am passing a prop to in my componentDidMount with the following values

{
  "dbResponse": {
    "__v": 0,
    "_id": "6149f01736503d7aa9fb138b",
    "instantMessage": false,
    "isComplete": false
  },
  "operationType": "todo_update"
}

// Works 

state = { 
   list: [], // This list is filled from a prop on component did mount
};

case 'todo_update':
    const {list} = this.state;
    //Find index of specific object using findIndex method.
    const objIndex = list.findIndex(
      obj => obj._id === data.dbResponse._id,
    );
    //Update object's isComplete property.
    list[objIndex].isComplete = data.dbResponse.isComplete;
    break;

// Does not work. It removes the last object
  case 'todo_update':
      const listStore = [];
      const {list} = this.state;
      //Find index of specific object using findIndex method.
      const objIndex = list.findIndex(
          obj => obj._id === data.dbResponse._id,
      );
      //Update object's isComplete property.
      list[objIndex].isComplete = data.dbResponse.isComplete;
      listStore.push(list[objIndex]);
      
      setState({list: listStore})
    break;

CodePudding user response：

Case 1

      case 'todo_update':
          const {list} = this.state;
          //Find index of specific object using findIndex method.
          const objIndex = list.findIndex(
            obj => obj._id === data.dbResponse._id,
          );
          //Update object's isComplete property.
          list[objIndex].isComplete = data.dbResponse.isComplete;
          break;

In this case state.list does get updated, but it doesn't re-render the Component. Because list[objIndex].isComplete = data.dbResponse.isComplete; is updating your state without using setState this is called Data Mutation. Which is not a correct way to update the state

Case 2

// Does not work. It removes the last object
  case 'todo_update':
      const listStore = [];
      const {list} = this.state;
      //Find index of specific object using findIndex method.
      const objIndex = list.findIndex(
          obj => obj._id === data.dbResponse._id,
      );
      //Update object's isComplete property.
      list[objIndex].isComplete = data.dbResponse.isComplete;
      listStore.push(list[objIndex]);
      
      setState({list: listStore})
    break;

In this listStore.push(list[objIndex]); is responsible for clearing you previous data. Since you are only pushing a single data listStore.push(list[objIndex]);.

Solution

      case 'todo_update':
          // This will avoid DataMutation
          const {list} = { ...this.state };


          //Find index of specific object using findIndex method.
          const objIndex = list.findIndex(
            obj => obj._id === data.dbResponse._id,
          );
          //Update object's isComplete property.
          list[objIndex].isComplete = data.dbResponse.isComplete;


          // This will update your state and re-render
          setState({ list })
          break;