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;

状态更改时Mobx不更新

1 个答案: