Javascript 检查React中的状态是否脏或干净

我有一个状态，它包含一个项目和复选框列表，根据我使用的API，默认情况下，这些项目和复选框被指定为false或true

简单地说，我的状态是这样的

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

单击复选框时，您按下一个按钮，弹出窗口会告诉您该项目是已注册还是已删除复选框为真/假。但是假设您在页面开始时已经选中了一个复选框，然后单击两次使其再次选中，弹出窗口不应该说项目已经注册，因为原始状态没有改变。它从真到假，然后又回到真

这是我的复选框handleChange函数

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”状态，因为只有这样我才能将原始状态与脏状态进行比较。

你可以做得更简单一些。创建一个startpoint并将其置于您的状态。仅更改状态，并在需要时将其与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');
}

---

你可以做得更简单。创建一个startpoint并将其置于您的状态。仅更改状态，并在需要时将其与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');
}

根据

由于this.props和this.state可能会异步更新，因此 不应依赖其值来计算下一个状态

根据

由于this.props和this.state可能会异步更新，因此 不应依赖其值来计算下一个状态

---

这是一种快速的方法。但我建议使用这样的库是一种快速的方法。但我建议使用像这样的库