在 React 中显示项目的选定过滤器数组的总数

Question

我有以下问题。在 widgetFilters 数组（长度===3）中，我想在过滤器的 header 中显示所选项目的数量。

  const [selectedFilters, setSelectedFilters] = useState([]);

在下面的代码片段中，我映射了所有 widgetFilter 数组并制作了 3 个手风琴，标题是过滤器的名称 typeName，然后是过滤器包含的选项，例如

      <Stack>
        {widgetFilters.map((filter) => (
          <FilterWidgetAccordion
            key={filter.id}
            headline={filter.typeName}
            list={filter.options}
            selectedFilters={selectedFilters}
            setSelectedFilters={setSelectedFilters}
          />
        ))}
      </Stack>

FilterWidgetAccordion.js

    <Fragment>
      <Accordion>
        <AccordionSummary aria-controls="panel1a-content" id="panel1a-header">
          <StyledTypography>{headline}</StyledTypography>
        </AccordionSummary>
        <AccordionDetails>
          {list?.map((filterItem) => {
            return(
        
            <Button
              onClick={() => {
                const list = [...selectedFilters];
                const index = list.indexOf(filterItem);
                index === -1 ? list.push(filterItem) : list.splice(index, 1);
                setSelectedFilters(list);
              }}
              key={filterItem.value}
            >
              {filterItem.value} 
            </Button>
          )})}
        </AccordionDetails>
      </Accordion>
    </Fragment>

我想在例如“产品类别”标题旁边添加所选按钮的数量，如下图所示。

Answer 1

您必须为每个小部件分开过滤器，然后在标题中显示过滤器长度，这是一个示例：

  const updateWidgetFilters=(myFilters, widgetTypeId)=>{
    setSelectedFilters((prevSelectedFilters)=>{
      const selectedElement = prevSelectedFilters?.find(({typeId})=>typeId===widgetTypeId);
      if(selectedElement) {
        selectedElement.filters= myFilters;
        return [...prevSelectedFilters]
      }
      return [...prevSelectedFilters, {typeId: widgetTypeId, filters: myFilters}]; 
    });
  }

...

  <Stack>
    {widgetFilters.map((filter) => (
      <FilterWidgetAccordion
        key={filter.id}
        headline={
              filter.typeName+' '
              +(selectedFilters?.find(({typeId})=>typeId===filter.typeId)?.filters?.length || 0)
        }
        list={filter.options}
        selectedFilters={selectedFilters?.find(({widgetId})=>typeId===filter.typeId)?.filters || []}
        setSelectedFilters={(filters)=>updateWidgetFilters(filters, filter.typeId)}
      />
    ))}
  </Stack>

在 React 中显示项目的选定过滤器数组的总数

Show total number of selected filters array of items in React

javascript

arrays

data-structures

reactjs

react-hooks