React-Table 过滤意外行为：更新表头（以及过滤器本身），而不是仅更新数据答案

【问题标题】：React-Table Filtering unexpected behavior : The table header is updated (and the filter itself) instead of updating just the dataReact-Table 过滤意外行为：更新表头（以及过滤器本身），而不是仅更新数据
【发布时间】：2020-11-02 21:50:26
【问题描述】：

我正在使用 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

【问题讨论】：

这听起来很明显，但听起来你需要一个更复杂的useEffect，它只在输入值的长度大于 1 时发送 Axios 请求，并为 header 和 body 创建子组件的表格，这样你就可以使用像shouldComponentUpdate 这样的东西来根据道具有条件地重新渲染每个特定的。
@GhassenLouhaichi，感谢您的贡献。尽管这可能是“最后一个资源”的解决方案，但真正的意图是只更新表的数据，而不是过滤器文本框。这样我们就可以对每个按键事件进行实时过滤。
@LuisGouveia 不是我建议的吗？如果我没记错的话，过滤器文本框是标题的一部分，而数据是正文的一部分，因此如果您制作这些单独的组件，您可以制作它，以便标题仅在输入按键时更新，并且正文仅在数据数组更改时更新。
@GhassenLouhaichi，好吧，我不明白你打算拆分组件，我以为你想做我们已经在做的事情，但只是在输入时，而不是按键。是的，这可能是一个解决方案，但它是非常定制的。我希望我们继续使用 react-table 的 DefaultColumnFilter，应该可以在不刷新标题的情况下实现过滤。我不敢相信这样一个流行的库有这么严重的错误，我们一定是做错了什么。我只是不知道是什么！
@LuisGouveia 你仍然可以在我的建议下使用 react-table，我的意思是不要像现在这样渲染<thead> 和它的所有孩子，您渲染一个您创建的组件，称为 <BTableHead> 之类的组件，它包装了 <thead> 并将其内容作为道具，并且您将其配置为仅在您的 headerGroups 中的某些内容发生更改时重新渲染。你也对<tbody> 做同样的事情。这就是我的意思，现在我不确定这是否仍然像你所说的那样过于“定制”。

标签： reactjs react-table

【解决方案1】：

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

问题就在这里。我们有：

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

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

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

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

现在我们使用了一个不同的变量（加载），它没有被过滤激活。它就像一个魅力！

【讨论】：