1

我正在将 react table v7 用于项目（table-columns）。其中一列 ( 'activated') 是布尔值，在更改时，它会调用不同的组件，这将更改布尔值。新的布尔值通过回调设置为：

{
   Header: ' ',
   accessor: 'activated',
   style:{width: '3%'},
   sortType: 'basic',
   Cell: props => {
      let isactivated = props.data[props.row.index].activated;
      return <MyComponent
             id={props.data[props.row.index].id}
             name={props.data[props.row.index].name}
             activated={isactivated}
             callback={()=>{
                let new_data = this.state.data;
                new_data[props.row.index].activated = !isactivated;
                store.dispatch();
                isactivated = !isactivated;
                this.setState({data: [...new_data]});
             }}
            />
    
      return <span title={isactivated ? "Enabled" : "Disabled"}>{isactivated ? ✅ : ❌}</span>
},

我遇到的问题是，这样做this.setState({data: [...new_data]});会重新加载整个表并将其设置为排序和过滤值。这意味着，例如，如果我的过滤是显示所有已激活的 = ✅，然后我将其中一项从 ✅ 更改为 ❌，则更改完成后，表格将重新加载并继续仅显示带有 ✅ 的对象，因此更改项目从视图中消失了。但是，我想停止重新加载，并保留当前视图，即使它与默认排序和过滤不匹配。

我找到的部分解决方案是将回调设置状态的方式更改为this.setState({data: new_data});. 这样，排序和过滤不会重新加载，并保持表格显示。但是，如果在那之后，我使用排序或过滤，它不知道该项目已从 ✅ 更改为 ❌。我意识到发生这种情况是因为仅props.data更改了此方法，而不是更改了props，其中包括props.preFilteredRows并且似乎这就是完成排序和过滤的地方。

有没有办法在操作后不重新加载默认排序和过滤来更改状态？

提前致谢！

4

0 回答 0