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

编程问答 2022-06-01

问题描述

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

在本例中，如果您在 true 和 false 之间调整第 14 行，您将看到显示或隐藏一列。距离列。

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

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

codeSandBox 中的数据是一种类似于这里包含两个键/值的 OBJ 的表示

   {
         lat: 40.7110316
​
         lng: -74.0013216
    }

我的数据和状态以及函数 isdisplay()

    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 为真，距离列也不会显示。

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

解决方法

您在记忆化的 display: isDisplay() 变量中使用了 columns。但是 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。

javascriptmui-datatablereactjsreactjsreactjsreactjs