如何根据GROQ查询字段的值有条件地呈现选项卡？

Question

我有一个GROQ查询，其中的结果是一个文档数组，其中一个字段"fieldName“可以包含"a”、"b“或"c”。如果数组包含的值为"a“，那么我希望在<TabList>中为它显示一个Chakra<TabList>，并在<TabPanels>中显示一个<TabPanel>。如果没有一个值为"a“的选项卡，则不要显示选项卡，并对条件"b”和"c“重复此选项卡。

// GROQ query

*[slug.current == $slug]{
    array[]->
}

// GROQ query json response

"result": [
    0:
    "array": [
        0: {...}
        1: {
            "_id": "1"
            "fieldName": "a"
        }
        2: {
            "_id": "2"
            "fieldName": "c"
        }
        3: {...}
        4: {...}
        5: {...}
        ]
    }
]

// This example would return tabs and panels for only a and c

在下面的示例中，我知道如何有条件地遍历这些项，但这无助于使用Tab项，因为循环这些条目会给我提供重复的选项卡。

<Tabs>
  <TabList>
    <Tab>A</Tab> // Conditionally render this only if any array items' "fieldName" contains value "a"

    ...

  </TabList>
  <TabPanels>
    <TabPanel>
      {array &&
        array.fieldName.map((panel) => (
          <>{panel.fieldName == "a" ? <>{panel.fieldName}</> : null}</>
        ))}
    </TabPanel>

    ...

  </TabPanels>
</Tabs>

由于Chakra标签的结构，我很难理解我是如何做到这一点的，并希望得到任何帮助。一定有比我正在尝试的方法更好的方法吗？

Answer 1

您可以创建一个对象并使用它来检查是否显示特定的选项卡和选项卡。

import React from 'react';
import {
  ChakraProvider,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
} from '@chakra-ui/react';
import './style.css';

const arr = [
  {
    _id: '1',
    fieldName: 'a',
  },
  {
    _id: '2',
  },
  {
    _id: '3',
    fieldName: 'c',
  },
  {
    _id: '4',
    fieldName: 'a',
  },
  {
    _id: '5',
    fieldName: 'c',
  },
  {
    _id: '6',
    fieldName: 'e',
  },
  {
    _id: '7',
  },
  {
    _id: '8',
    fieldName: 'c',
  },
  {
    _id: '9',
    fieldName: 'a',
  },
];

function process(arr) {
  const tabs = {};
  arr.forEach((item, idx) => {
    if (item.fieldName && !tabs[item.fieldName]) {
      tabs[item.fieldName] = idx;
    }
  });
  return tabs;
}

export default function App() {
  const tabs = process(arr);
  return (
    <ChakraProvider>
      <Tabs>
        <TabList>
          {tabs['a'] && <Tab>A</Tab>}
          {tabs['b'] && <Tab>B</Tab>}
          {tabs['c'] && <Tab>C</Tab>}
          {tabs['d'] && <Tab>D</Tab>}
          {tabs['e'] && <Tab>E</Tab>}
        </TabList>

        <TabPanels>
          {tabs['a'] && (
            <TabPanel>
              <p>A</p>
            </TabPanel>
          )}
          {tabs['b'] && (
            <TabPanel>
              <p>B</p>
            </TabPanel>
          )}
          {tabs['c'] && (
            <TabPanel>
              <p>C</p>
            </TabPanel>
          )}
          {tabs['d'] && (
            <TabPanel>
              <p>D</p>
            </TabPanel>
          )}
          {tabs['e'] && (
            <TabPanel>
              <p>E</p>
            </TabPanel>
          )}
        </TabPanels>
      </Tabs>
    </ChakraProvider>
  );
}

Working Example