Reactjs 反应表筛选意外行为：更新表头（以及筛选器本身），而不是仅更新数据

我正在使用React@16.13.1，反应-Table@7.2.1及Axios@0.19.2，以创建具有开箱即用服务器端分页和筛选的表。 分页工作正常，但我在过滤方面遇到了一些困难。我有两个默认的文本过滤器可以正确过滤（它们从服务器获得正确的信息），但我遇到了奇怪的行为：

• 按键时，过滤完成后（当axios请求得到响应时），表格将完全刷新，包括过滤器所在的标题（不仅是其结果）
• 由于它刷新了整个表，用户正在键入的文本框会失去焦点，并强制用户重新选择过滤器以引入第二个字符

对于筛选，我使用了React表提供的DefaultColumnFilter：

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

函数DefaultColumnFilter（{column:{filterValue，setFilter，id}）{
返回(
{
setFilter（例如，target.value | |未定义）
}}
占位符={'Rechercher…`}
/>
)
}

因此，我的问题是：

• 仅键入一个字符后，如何停止自动筛选（我尝试使用setTimeout，但无法将其设置为正常工作…）
• 如何使其停止刷新整个表（包括标题）

---

我在这里创建了一个包含相关代码的沙盒：

我们终于理解了这个问题。与反应表无关React表完全能够进行服务器端的即时筛选。

问题就在这里。我们有：

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

//呈现表的UI
如果（页面加载）返回

页面加载是通过过滤激活的，因此我们将其替换为：

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

//呈现表的UI
如果（正在加载）返回

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

---

现在我们使用的是一个不同的变量（加载），它不是通过过滤激活的。它就像一个符咒

这听起来很明显，但听起来您需要一个更复杂的

useffect

，它只在输入值的长度大于1时发送Axios请求，并为表的标题和正文创建子组件，这样，您就可以使用诸如

shouldComponentUpdate

之类的工具，根据道具有条件地重新渲染每个特定的道具。@GhassenLouhaichi，感谢您的贡献。虽然这可能是一个“最后一个资源”解决方案，但真正的目的是只更新表的数据，而不更新过滤器文本框。这样我们就可以对每个按键事件进行实时过滤。@LuisGouveia这不是我建议的吗？如果我没有弄错的话，过滤器文本框是标题的一部分，数据是正文的一部分，所以如果你制作这些单独的组件，你可以使标题只在输入上的按键时更新，正文只在数据数组更改时更新。@GhassenLouhaichi，ok，我不明白你打算拆分组件，我以为你想做的正是我们已经在做的事情，但只是在回车键上，而不是键向上。是的，这可能是一个解决方案，但它是非常定制的。我希望我们继续使用react表的DefaultColumnFilter，应该可以在不刷新标题的情况下实现过滤。我不敢相信如此受欢迎的图书馆有如此严重的错误，我们一定是做错了什么。我只是不知道是什么@LuisGouveia根据我的建议，您仍然可以使用react table，我的确切意思是，您不必像现在这样渲染所有子级的

，而是渲染一个您创建的组件，该组件称为

，它包装

，并将其内容作为道具，并且您将其配置为仅当

标题组中的内容发生更改时才重新渲染。对于
，您也可以这样做。这就是我的意思，现在我不确定这是否像你说的那样太“定制”。