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

Question

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

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

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

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

codeSandbox 中的数据是一种类似于此处包含两个 key/values

的 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 为 true，Distance 列也不会显示。

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

Answer 1

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

所以应该是：

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

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

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

A column in MUI Datatable do not hide or show based on a state true or false condition

javascript

reactjs

mui-datatable