Проверьте, является ли состояние грязным или чистым в React

Question

У меня есть состояние, в котором содержится список элементов и флажков, которым по умолчанию присваивается значение false или true (в зависимости от API, с которым я работаю).

Для простоты скажем, что у меня такое состояние.

state = { 
  list: [
    {
    id: 0,
    name: 'item1'
    assigned: true
    }
  ],
   dirtyList: []
}

Когда флажок установлен, вы нажимаете кнопку, и во всплывающем окне указывается, был ли элемент зарегистрирован или удален (флажок имеет значение true / false). Но допустим, что вы запускаете страницу с уже установленным флажком, а затем дважды щелкаете по нему (снова проверяя его на истинность), во всплывающем окне не следует указывать, что элемент был зарегистрирован, поскольку исходное состояние не изменилось. (Оно перешло от true, false, затем обратно к true)

Вот мой флажок handleChange function

checkboxChanged = (event, id) => {    
let isChecked = event.target.checked
const index = this.state.list.findIndex(list => list.id === id)
const newState = [...this.state.list]
let newList = { ...newState[index] }
console.log(newList) 
// By console logging this, it eventually tells me the previous state of the item that was clicked

newState[index].assigned = isChecked
this.setState({
  list: newState,
})
}

Мне трудно понять, как / где я могу обновить состояние 'dirtyList', потому что только тогда я могу сравнить исходное состояние с грязным.

Answer 1

Согласно документации React

Поскольку this.props и this.state могут обновляться асинхронно, вы не следует полагаться на их значения для расчета следующего состояния.

this.setState((state)=>{
   // some code here

   const newState = [...state.list]
   return {
      list: newState
   }
})

Answer 2

Вы могли бы сделать это проще. Создайте начальную точку и поместите ее в свое состояние. Изменяйте только состояние и сравнивайте его с startState, когда вам нужно:

const startState = {
    a: true,
    b: false
}
this.state = this.startState;

onSomeAction(){
    if( JSON.stringify(startState) !== JSON.stringify(this.state){ /* ... */}
}

Прочитайте эту страницу для сравнения объектов в Javascript.

---

В качестве альтернативы вы можете просто проверить значение:

onChange(key, evt){
    if( this.state[key] !== this.startState[key] ){ /* ... */ }
    // usage: this.onChange(event, 'a');
}