Question

我有一个状态，其中包含项和复选框的列表，这些项和复选框默认情况下分配为false或true（取决于我使用的API）。

为简单起见，假设我的状态是这样的。

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

单击复选框后，您按一个按钮，弹出窗口会告诉您该项目是否已注册或删除（复选框为true / false）。但是，假设您在开始页面时已选中一个复选框，然后单击两次（再次将其选中），则弹出窗口不应说该项目已注册，因为原始状态未更改。（它从true，false，然后回到true）

这是我的复选框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'状态，因为只有这样我才能比较原始状态和脏状态。

Answer 1

您可以简化操作。创建一个起点并将其置于您的状态。仅在需要时对状态进行突变并将其与startState进行比较：

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

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

Read this page for Object comparison用Javascript。

或者，您可以只检查值：

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

Answer 2

根据React Documentation

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

.copyleft { ... }

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

2 个答案: