MUI 数据表中的列不会根据状态真假条件隐藏或显示

Posted 2023-02-22

【中文标题】MUI 数据表中的列不会根据状态真假条件隐藏或显示

【英文标题】：A column in MUI Datatable do not hide or show based on a state true or false condition

【发布时间】：2021-04-06 04:06:27

【问题描述】：

我正在尝试根据状态条件显示或隐藏 MUI 数据表中的列。 我在这里举了一个有效的例子 CodeSandBox

在此示例中，如果您在真假之间调整第 14 行，您将看到显示或隐藏一列。距离列。

我试图在我的代码中实现同样的行为，但它不起作用，我不知道为什么： Link to code

我添加了一个链接，因为我不知道出了什么问题，但我尝试了与在 CodeSandBox 中相同的方式：

codeSandbox 中的数据表示类似于此处包含两个键/值的 OBJ

   
         lat: 40.7110316
​
         lng: -74.0013216
    

我的数据和状态和函数是Display()

    const [usingLocation, setLocation] = useState(null);
    
    const isDisplay = () => 
    if (usingLocation !== null) return true;
    else return false;
  ;

我的专栏

const columns = useMemo(
    () => [
      'Id',
      
        name: 'Distance',
        options: 
          display: isDisplay(),
          filter: false,
          customBodyRender: value => 
            return !value ? 'N/A' : `$value $DISTANCE_MEASURE`;
          ,
        ,
      ,
    ],
    [sites, site],
  );

在我的情况下，即使 usingLocation 为真，距离列也不会显示。

我真的不明白我做错了什么。

【参考方案1】：

您在记忆的columns 变量中使用display: isDisplay()。但是isDisplay 没有在依赖数组中声明，只有 site 和 sites 是。这会导致column 在isDisplay 的返回值更改时不会重新渲染。

应该是这样的：

const columns = useMemo(
    () => [
      'Id',
      
        name: 'Distance',
        options: 
          display: isDisplay(),
          filter: false,
          customBodyRender: value => 
            return !value ? 'N/A' : `$value $DISTANCE_MEASURE`;
          ,
        ,
      ,
    ],
    [sites, site, isDisplay],
  );

不过，就我个人而言，我认为没有理由记住 columns。

【讨论】：

我记住了，因为在我的情况下，当我选择一行并将其保存到数据库时，表正在重新渲染并且没有保存数据。使用备忘录，我能够保存并强制将数据放置到位。不幸的是，我没有在此表中找到避免该问题的其他解决方案。