reactjs - react 表过滤意外行为 : The table header is updated (and the filter itself) instead of updating just the data

Question

我正在使用 React@16.13.1、React-Table@7.2.1 和 Axios@0.19.2 创建一个具有开箱即用的服务器端分页和过滤功能的表格。分页工作正常，但我在过滤时遇到了一些困难。我有两个可以正确过滤的默认文本过滤器(它们从服务器获取正确的信息)，但我遇到了奇怪的行为:

• 在按键时，当过滤完成时(当 axios 请求得到答复时)，表格将完全刷新，包括过滤器所在的标题(而不仅仅是其结果)；
• 由于它刷新了整个表格，用户输入的文本框失去了焦点，并迫使用户重新选择过滤器以引入第二个字符。

对于过滤，我使用 React-Table 提供的 DefaultColumnFilter:

function DefaultColumnFilter({ column: { filterValue, setFilter, id } }) {
  return (
    <input
      value={filterValue || ""}
      onChange={e => {
        setFilter(e.target.value || undefined)
      }}
      placeholder={`Rechercher ...`}
    />
  )
}

所以，我的问题是:

• 如何在仅键入一个字符后停止自动过滤(我尝试使用 setTimeout，但无法将其设置为正常工作...)？
• 如何让它停止刷新整个表，包括表头？

我在这里用相关代码创建了一个沙箱:https://codesandbox.io/s/mystifying-shape-3tbn7

Answer 1

我们终于明白了问题所在。它与 react 表无关。 React-table 完全能够开箱即用地进行服务器端过滤。

问题就在这里。我们有:

// Render the UI for your table
if (pageLoading) return <Loading />

pageLoading 是通过过滤激活的，因此我们将其替换为:

// Render the UI for your table
if (loading) return <Loading />

每次使用过滤器时，我们都在“删除”表格的 HTML。那时我们正在用加载栏“”替换表格。

现在我们正在使用一个不同的变量(加载)，它没有被过滤激活。它就像一个魅力!