状态改变时 Mobx 不更新

Question

我正在使用带有 mbox 的 react-table 并且遇到了我的状态未更新的问题。

我有一张这样的桌子

<ReactTable
  data={data}
  columns={columns}
  showPageSizeOptions={false}
  resizable={false}
  className="-striped -highlight"
  defaultPageSize={12}
  filterable={true}
/>

一列

{
  Header: "",
  accessor: "checkbox",
  filterable: false,
  width: 35,
  Cell: ({ original }) => {
    return (
      <input
        type="checkbox"
        className="checkbox"
        checked={employeeUiStore.selectedEmployees.indexOf(original.id) >= 0 }
        onChange={() => employeeUiStore.toggleCheckbox(original.id)}
      />
    );
  }
},

还有这样的商店

class EmployeeUiStore {
  @observable addMode = false;
  @observable selectedEmployees = []
  constructor(){}
  @action
  toggleCheckbox(employeeId) {
    const index = this.selectedEmployees.indexOf(employeeId);
    if(index === -1){
      this.selectedEmployees = [...this.selectedEmployees, employeeId];
    }else {
      const newSelectedEmployees = [...this.selectedEmployees];
      newSelectedEmployees.splice(index, 1);
      this.selectedEmployees = newSelectedEmployees;
    }
  }  
  @action
  toggleAddEmployee(){
      this.addMode = !this.addMode;
  }
}
export default EmployeeUiStore;

奇怪的是，如果我在我的代码中添加这样的东西

console.log(employeeUiStore.selectedEmployees.indexOf(0) >= 0)

然后状态会正确更新，但是当我删除此行时，什么都不会更新。

我看到我的 toggleCheckbox 正在被触发并且状态正在更新。

我在这个组件上也有@observer。

Answer 1

当您将 data 数组传递给 ReactTable 组件时，您不会取消引用任何内容。

在将数组传递给外部库之前，您可以通过数组上的 using slice or peek 解决此问题：

<ReactTable
  data={data.slice()}
  columns={columns}
  showPageSizeOptions={false}
  resizable={false}
  className="-striped -highlight"
  defaultPageSize={12}
  filterable={true}
/>

在 MobX 中也不需要不变性。您可以立即更改数组：

class EmployeeUiStore {
  @observable addMode = false;
  @observable selectedEmployees = [];

  @action
  toggleCheckbox(employeeId) {
    const index = this.selectedEmployees.indexOf(employeeId);
    if (index === -1) {
      this.selectedEmployees.push(employeeId);
    } else {
      this.selectedEmployees.splice(index, 1);
    }
  }

  @action
  toggleAddEmployee(){
    this.addMode = !this.addMode;
  }
}

export default EmployeeUiStore;