反應警告：列表中的每個孩子都應該有一個唯一的“關鍵”道具不是由地圖中缺少關鍵引起的

Question

我目前正在開發一個 React 18 應用程序。 在其中一個頁面上，我收到以下錯誤：

我知道這種錯誤通常與 map 函數中缺少唯一鍵有關，但在我的情況下，因為如果我使用 React DevTools 檢查組件，所有鍵都是不同的，這導致我認為警告在控制台中誤導並且是由其他原因引起的，但我可能是錯的。

RockfonDropdownFilterResponsive 組件代碼：

/* eslint-disable @typescript-eslint/no-non-null-assertion */
import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
import type { ReactElement } from 'react';
import AnimateHeight from 'react-animate-height';
import { useIsMounted } from '../../hooks/useIsMounted';
import { generateFilterRows, generateGroupFilters, generateGroupFiltersMobile } from '../shared/rockfon-filter-factory';
import type { FilterOptions, Group, RockfonProductFilterOrderSettings } from '../shared/types';
import { useOnClickOutside } from '../../hooks/useOnClickOutside';

interface BaseProductFilterProps {
    filterTitle: string;
    optionsTitle: string;
    handleClose: () => void;
    handleOpen: () => void;
    noFiltersAvailableLabel: string;
    selectedOptions: string[];
}

interface ProductFilterProps extends BaseProductFilterProps {
    isOpen: boolean;
    groups?: Group[];
    options: FilterOptions[];
    noFiltersAvailableLabel: string;
    selectOption: (value: string) => void;
    selectGroupOption: (value: string) => void;
    selectedOptions: string[];
    filterNarrowCondition?: (value: string, minValue?: number, maxValue?: number) => boolean;
    applySelections: () => void;
    isMobile: boolean;
    shrinkingOptions?: (options: FilterOptions[], type: string) => FilterOptions[];
    name?: string;
    isShrinking?: number;
    orderSettings: RockfonProductFilterOrderSettings;
}

interface ProductFilterPresentationProps extends BaseProductFilterProps {
    height: number | string;
    handleClose: () => void;
    handleOpen: () => void;
    filterRows: ReactElement[];
    isOpen: boolean;
}

const RockfonDropdownFilterResponsive = (props: PropsWithChildren<ProductFilterPresentationProps>): ReactElement => (
    <div className="filterDropdownContainer">
        <div>
            <div
                role="listbox"
                className={props.isOpen ? 'btn-dropdown is-open' : 'btn-dropdown'}
                onClick={props.isOpen ? props.handleClose : props.handleOpen}
                tabIndex={0}
            >
                <span className="filter-name" title={props.filterTitle}>{props.filterTitle}</span>
                <svg height="20" width="20" aria-hidden="true">
                    <path d="M4.516 7.548c.436-.446 1.043-.481 1.576 0L10 11.295l3.908-3.747c.533-.481 1.141-.446 1.574 0 .436.445.408 1.197 0 1.615-.406.418-4.695 4.502-4.695 4.502a1.095 1.095 0 01-1.576 0S4.924 9.581 4.516 9.163s-.436-1.17 0-1.615z" />
                </svg>
            </div>
            <AnimateHeight className="filter" contentClassName="filter-content" height={props.height} duration={300}>
                {props.children && <>{props.children} <div className="divider" /></>}

                <div className="filter__option-title">{props.optionsTitle}</div>
                {props.filterRows.length > 0 && <div className="filter-scrollbar">{props.filterRows}</div>}
                {props.filterRows.length === 0 && (
                    <div className="no-filters">{props.noFiltersAvailableLabel}</div>
                )}
            </AnimateHeight>
        </div>  
        <div className="filter-item">
            <div
                role="listbox"
                className={props.isOpen ? 'btn-dropdown is-open' : 'btn-dropdown'}
                onClick={props.isOpen ? props.handleClose : props.handleOpen}
                tabIndex={0}
            >
                <span className="filter-name" title={props.filterTitle}>
                    {props.filterTitle}{props.selectedOptions.length > 0 && <sup>({props.selectedOptions.length})</sup>}
                </span>
                <svg height="20" width="20" aria-hidden="true">
                    <path d="M4.516 7.548c.436-.446 1.043-.481 1.576 0L10 11.295l3.908-3.747c.533-.481 1.141-.446 1.574 0 .436.445.408 1.197 0 1.615-.406.418-4.695 4.502-4.695 4.502a1.095 1.095 0 01-1.576 0S4.924 9.581 4.516 9.163s-.436-1.17 0-1.615z" />
                </svg>
            </div>
            <AnimateHeight height={props.height} duration={300}>
                <div className="filter">
                    {props.children}
                    {props.children && <div className="divider" />}
                    {props.filterRows.length > 0 && (
                        <div className="filter-scrollbar">
                            {props.filterRows}
                        </div>
                    )}
                    {props.filterRows.length === 0 && (
                        <div className="no-filters">{props.noFiltersAvailableLabel}</div>
                    )}
                </div>
            </AnimateHeight>
        </div>
    </div>
)

export const RockfonDropdownFilter = (props: PropsWithChildren<ProductFilterProps>): ReactElement => {
    const [height, setHeight] = useState<0 | 'auto'>(0);
    const [displayedOptions, setDisplayedOptions] = useState<FilterOptions[]>([]);
    const isMounted = useIsMounted();
    const [openTabIndex, setOpenTabIndex] = useState<number>(0);

    const ref = useRef();
    useOnClickOutside(ref, () => {
        if (!props.isMobile && props.isOpen) {
            const filterContainer = document
                .getElementById('filtersDesktopFrm');
            const filterContainerDisplay = getComputedStyle(filterContainer).getPropertyValue('display');
            if (filterContainerDisplay != 'none') {
                props.handleClose();
            }
        }
    });
    useEffect(() => {
        if (!isMounted) {
            return;
        }

        if (props.isOpen) {
            requestAnimationFrame(() => {
                setHeight('auto');
            });
        }
        else {
            requestAnimationFrame(() => {
                setHeight(0);
            });
        }
    }, [props.isOpen]);

    const handleFilterRowChange = (value: string) => {
        if (isMounted) {
            props.selectOption(value);
            if (!props.isMobile) {
                props.applySelections();
            }
        }
    };

    useEffect(() => {
        if (props.isShrinking && props.isMobile) {
            if (props.shrinkingOptions) {
                setDisplayedOptions(props.shrinkingOptions(props.options, props.name));
            }
        }
    }, [props.isShrinking])

    useEffect(() => {
        if (props.isMobile &&  !props.shrinkingOptions) {
            setDisplayedOptions(props.options);
        }
        else {
            if (props.shrinkingOptions) {
                setDisplayedOptions(props.shrinkingOptions(props.options, props.name));
            } else {
                setDisplayedOptions(props.filterNarrowCondition ? props.options.filter(f => !props.filterNarrowCondition(f.value, f.minValue, f.maxValue)) : props.options);
            }
        }
    }, [props.options, props.filterNarrowCondition]);

    const hasGroups = props.groups && props.groups.length > 0;
    const groupsOnOptions: string[] = props.options.map((f) => f.group).filter((g) => g) as string[];
    const isAnyFilterWithGroup =
        hasGroups && groupsOnOptions.some((f) => props.groups!.map((g) => g.value).includes(f));

    let filterRows = [];

    if (isAnyFilterWithGroup) {
        const groupedFilters = props.isMobile
            ? generateGroupFiltersMobile(props.groups!, displayedOptions, props.selectedOptions, openTabIndex, setOpenTabIndex, handleFilterRowChange, props.orderSettings)
            : generateGroupFilters(props.groups!, displayedOptions, props.selectedOptions, handleFilterRowChange, props.orderSettings)
        filterRows.push(groupedFilters);
    }
    else {
        filterRows = generateFilterRows(displayedOptions, props.selectedOptions, props.orderSettings, handleFilterRowChange);
    }

    const presentationProps: ProductFilterPresentationProps = {
        selectedOptions: props.selectedOptions,
        filterTitle: props.filterTitle,
        filterRows,
        height,
        handleClose: props.handleClose,
        handleOpen: props.handleOpen,
        optionsTitle: props.optionsTitle,
        isOpen: props.isOpen,
        noFiltersAvailableLabel: props.noFiltersAvailableLabel
    }
    return <div ref={ref}>
        <RockfonDropdownFilterResponsive {...presentationProps}>{props.children}</RockfonDropdownFilterResponsive>
    </div>
}

有誰知道如何擺脫這個警告，或者我應該如何找到更多關於這個問題的信息？

編輯：使用 generateGroupFilters 和 generateGroupFiltersMobile 函數更新問題。

export const generateGroupFilters = (
    groups: Group[],
    filterOptions: FilterOptions[],
    checkedFilters: string[],
    handleFilterRowChange: (value: string) => void,
    orderSettings: RockfonProductFilterOrderSettings
): ReactElement => {
    const groupRows = sortGroups(groups, orderSettings).map((gr) => {
        const groupOptions = filterOptions.filter((f) => f.group === gr.value);
        const groupFilterRows = generateFilterRows(groupOptions, checkedFilters, orderSettings, handleFilterRowChange);
        return (
            <React.Fragment key={`Group${gr.value}`}>
                <GroupNameRow key={gr.value} {...gr} />
                {groupFilterRows}
            </React.Fragment>
        );
    });
    const groupValues = groups.map((gr) => gr.value);
    const filterOptionsWithoutGroup = filterOptions.filter((f) => !groupValues.includes(f.group || ''));
    const filterRowsWithoutGroup = generateFilterRows(filterOptionsWithoutGroup, checkedFilters, orderSettings, handleFilterRowChange);
    return (
        <>
            {groupRows}
            {filterRowsWithoutGroup && filterRowsWithoutGroup.length > 0 && (
                <>
                    <GroupNameRow key="no-group-indicator" {...{ label: 'Others', value: '' }} />
                    {filterRowsWithoutGroup}
                </>
            )}
        </>
    );
};

export const generateGroupFiltersMobile = (
    groups: Group[],
    filterOptions: FilterOptions[],
    checkedFilters: string[],
    openTabIndex: number,
    setOpenTabIndex: (number) => void,
    handleFilterRowChange: (value: string) => void,
    orderSettings: RockfonProductFilterOrderSettings
): ReactElement => {
    const getHeight = (index: number) => (index === openTabIndex ? 'auto' : 0);

    const groupRows = sortGroups(groups, orderSettings).map((gr, index) => {
        const groupOptions = filterOptions.filter((f) => f.group === gr.value);
        const groupFilterRows = generateFilterRows(groupOptions, checkedFilters, orderSettings, handleFilterRowChange);
        const tabIndex = index + 1;

        return (
            <React.Fragment key={`Group_${gr.value}`}>
                <GroupNameRowMobile
                    key={gr.value}
                    {...gr}
                    count={groupOptions.filter((x) => checkedFilters.includes(x.value)).length}
                    className={tabIndex === openTabIndex ? '' : 'is-open'}
                    onClick={() => setOpenTabIndex(openTabIndex === tabIndex ? 0 : tabIndex)}
                />
                <AnimateHeight height={getHeight(tabIndex)}>{groupFilterRows}</AnimateHeight>
            </React.Fragment>
        );
    });
    const groupValues = groups.map((gr) => gr.value);
    const otherIndex = groupRows.length + 1;
    const filterOptionsWithoutGroup = filterOptions.filter((f) => !groupValues.includes(f.group || ''));
    const filterRowsWithoutGroup = generateFilterRows(filterOptionsWithoutGroup, checkedFilters, orderSettings, handleFilterRowChange);
    return (
        <div key="group_container">
            {groupRows}
            {filterRowsWithoutGroup && filterRowsWithoutGroup.length > 0 && (
                <>
                    <GroupNameRowMobile
                        key="no-group-indicator"
                        {...{ label: 'Others', value: '' }}
                        onClick={() => setOpenTabIndex(otherIndex)}
                    />
                    <AnimateHeight height={getHeight(otherIndex)}>{filterRowsWithoutGroup}</AnimateHeight>
                </>
            )}
        </div>
    );
};

Answer 1

您的generateGroupFilters返回一個沒有key的片段：

return (
    <>
        ...
    </>
);

您將這些片段推入filterRows並使用它。

即使是數組中的片段也需要鍵，所以你會得到錯誤。

這是問題的一個示例（遺憾的是，Stack Snippets 僅支持<React.Fragment>...<React.Fragment> ，不支持<>...</> ，但沒有任何區別）：

 const Example = () => { const example = [ <React.Fragment>a</React.Fragment>, <React.Fragment>b</React.Fragment>, <React.Fragment>c</React.Fragment>, ]; return <div>{example}</div>; }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Example />);

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

當你運行它時，你會得到關於鍵的標准警告。 這是在 CodeSandbox 上使用<>...</>的實時副本，顯示相同的錯誤。

向正在返回的片段添加鍵，這些鍵在整個filterRows中是唯一的。