Javascript 反应：当应用过滤器时，未使用dhtmlx甘特库正确绘制UI

我正在使用库中的

React

创建甘特图。我在与

useffect

/

useLayoutEffect

生命周期一起使用筛选功能时遇到问题

其要点是浏览器在某些情况下无法在屏幕上绘制/呈现正确的UI

开始状态加载屏幕如下所示：
6任务

过滤后，应该是这样的：
在过滤掉持续时间>4后，应留下5个任务

但事实就是这样：
左侧显示5个任务，但显示一个空行，而不是“刷新”（不确定这是否是要使用的正确术语）

我创建了一个不同的场景来描述问题，以及如何重现这些问题。有关如何运行该示例的更多信息，请参见

README.md

。如果需要提供更多信息，请告诉我

示例1：使用条件渲染将导致绘制UI更改问题
示例2：打开和关闭

智能渲染

配置导致绘制UI更改的问题
示例3：使用完全相同的代码在父组件和子组件中调用函数会导致绘制UI出现问题

我期望的结果是能够正确地呈现UI，无论过滤数据的代码是否在父组件或子组件上运行

我还应该提到一个解决方法是使用

if（document.querySelector（“.gantt_grid”））gantt.render（）onBeforeTaskDisplay

事件中使用code>而不是

gantt.refreshData（）

，该事件将正确绘制UI更改。但我仍然想理解为什么会发生这种情况。在使用React生命周期等方面是否有任何错误

谢谢。

请在代码中的

gantt.refreshData（）

之后尝试

gantt.render（）

：

useffect（（）=>{
const onBeforeTaskDisplay=gantt.attachEvent（“onBeforeTaskDisplay”，函数（id，任务）{
console.log（“过滤器”，task.text，过滤器）
如果（筛选和任务持续时间>4）{
返回false；
}
返回true；
});
甘特图。刷新数据（）；
gantt.render（）；
//这个应该在这里
return（）=>{
甘特图.detachEvent（onBeforeTaskDisplay）；
}
}，[过滤器]）

您的代码看起来不错，应该可以正常工作

该问题位于dhtmlxGantt端，已得到确认，现在已在开发分支中修复

错误本身是由v6.2.0中引入的新智能渲染机制引起的。 它缓存以前计算的任务位置，以最小化计算。在某些情况下，当甘特图实例被多次初始化时，它不会在必要时使缓存失效。因此，任务被显示在与应用过滤之前相同的位置（因此第一个任务已经完成的空白行）。 简而言之，该问题将在下一次错误修复更新-v6.2.6中修复

---

如果一切按计划进行，它将于明天（2019-09-19）发布。

hi，正如我已经提到的那样，这将起作用，但这不是答案。不过谢谢。嗨，谢谢你的确认和修复。将在最新版本中进行测试以验证。根据我的初始测试，这似乎已在最新版本（6.2.6）中得到解决。谢谢