Блог

Главная - Вопросы по программированию - Реагируйте нативно, как обновлять элементы в объекте

Реагируйте нативно, как обновлять элементы в объекте

#javascript #reactjs #react-native

Вопрос:

Как мы правильно обновляем элемент в объекте? Я пытаюсь обновить элемент IsComplete = true или false в зависимости от результатов моего db.response

Если то, что у меня уже есть, правильно, не могли бы вы, пожалуйста, объяснить мне, что заставляет это работать

в настоящее время я использую this.setState (), которому я передаю опору в моем componentDidMount со следующими значениями

 {
  "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;

Комментарии:

1. listStore Для чего это нужно?

2. просто временное хранение списка, потому что я получал дубликат списка, когда я не очистил этот.state.list

3. Пожалуйста, вы также проголосуете за ответ.

Ответ №1:

Случай 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;

В этом случае state.list действительно обновляется, но не перерисовывается Component . Потому list[objIndex].isComplete = data.dbResponse.isComplete; что обновление вашего state без использования setState этого называется Data Mutation . Что не является правильным способом обновления state

Случай 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;

При этом listStore.push(list[objIndex]); несет ответственность за очистку ваших предыдущих данных. Так как вы передаете только одни данные listStore.push(list[objIndex]); .

Решение

       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;
Метки: ,