MUI-DATATABLES中的一列不会基于状态true或false条件隐藏或显示 我正在尝试根据状态的条件在MUI数据中显示或隐藏列。 我在这里举例说明了 codesandbox 在此示例中，如果您在True and false之间进行了调整14 ...

Question

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

我添加了一个链接，因为我不知道怎么了，但是我尝试了在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],
  );

在我的情况下，即使使用时间为真，距离列也永远不会显示。

我真的没有得到我在做错什么。

您在回忆的

display: isDisplay()

变量中使用

columns

。但是

isDisplay

在依赖性数组中声明了，只有

site

和

sites

是。这会导致

column

当返回值更改时不重新渲染。

应该是：

Answer 1

isDisplay

，我个人认为没有理由记住

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

。