每次状态值发生变化时，DevExtreme React DataGrid 都会重置为第 1 页

Question

示例案例步骤：

对于尝试浏览大型数据集的用户来说，这可能会令人沮丧和破坏性。

Answer 1

在多次调整代码后，我发现我的案例中的这个错误是由于

searchPanel

中的

<DataGrid>

属性和

<Toolbar>

组件之间的冲突而发生的。

这是我发生错误时的代码：

<DataGrid
  {...other props}
  searchPanel={{visible: true}}
>
  <Toolbar>
    ...
  </Toolbar>
  
  ...
</DataGrid>

从

searchPanel

中删除
<DataGrid>
属性后，然后在
<Toolbar>
组件中声明搜索面板，如下所示：

<DataGrid
  {...other props}
>
  <Toolbar>
    ...
    <Item name="searchPanel" visible={true} />
  </Toolbar>
  
  ...
</DataGrid>

错误消失了

我不知道确切/技术上为什么这个分页错误可能与搜索面板和工具栏有关。但最终就我而言，这修复了错误。

Version
"react": "^18.2.0"
"devextreme": "^22.1.6"
"devextreme-react": "^22.1.6"

Answer 2

我也在使用 DevExtreme 开发一个项目，有时我也会遇到这个问题。

问题。 所以问题出在原始设置上，您将一个内联对象传递到

DataGrid

。

<DataGrid searchPanel={{ enabled: true }}>

DevExtreme 建议不要将内联函数和对象传递到其组件中。这是为了避免状态更改时不必要的重新渲染。在使用 React 时，我们无法阻止这种情况的发生（即状态会不时改变）。

分辨率。 将 searchPanel 包装在

useMemo

中或在组件外部定义它。如果对于某些复杂的实例，您想要访问本地状态，请选择

useMemo

。

const searchPanelProps = useMemo(() => ({ enabled: true }), [])
return <DataGrid searchPanel={searchPanelProps}>...