反应虚拟化的recomputeRowHeights和forceUpdate不起作用

问题描述

我正在使用react-virtualized，其中有一个Row组件，看起来像这样：

const CategoryRow = React.memo(
  ({
    category: { id: categoryId,name },listRef
  }) => {
    const [isEditingName,setIsEditingName] = useState(false);

    useEffect(() => {
      listRef.current.recomputeRowHeights();
      listRef.current.forceUpdate();
    },[listRef,isEditingName]);

    const handleRemoveAddCategoryForm = useCallback(() => {
      setIsEditingName(false);
    },[setIsEditingName]);

    return (
      <StyledRow data-test-id={TEST_TRIGGERS_LANDING_CATEGORY_ROW}>
        {isEditingName ? (
          <FormThing handleRemoveAddCategoryForm={handleRemoveAddCategoryForm} />
        ) : (
          <>
            <CategoryContent>
              Hello
            </CategoryContent>
            <CategoryOptionsMenu>
              <OptionsMenu
                {...{ categoryId }}
                setIsEditingName={setIsEditingName}
              />
            </CategoryOptionsMenu>
          </>
        )}
      </StyledRow>
    );
  }
);

当用户单击OptionsMenu中的内容时，会将isEditingName设置为true，从而呈现FormThing，其高度比普通CategoryContent大。我希望调用recomputeRowHeights()和forceUpdate会导致该行正确地调整大小，但是它保持其原始高度，从而导致内容溢出到下一行。一旦我点击了FormThing的输入，但并没有在forceUpdate的调用上，它的更新就正确了。

有什么想法为什么不更新？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）