如何向 React/Material UI 自动完成组件添加唯一键？

Question

我正在尝试创建一个Autocomplete实质上仅向用户显示搜索结果的 Material UI 组件。某些选项的名称可能会重复，但它们都有唯一的 ID。我收到以下警告：

\n

\n

index.js:1 警告：遇到两个具有相同键的子项，Name B。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一的键可能会导致子项重复和/或省略 \xe2\x80\x94 该行为不受支持，并且可能在未来版本中更改。

\n

\n

const SearchField = () => {\n    const [open, setOpen] = React.useState(false)\n    const [searchQuery, setSearchQuery] = React.useState('')\n    const [searchResults, setSearchResults] = React.useState([])\n    const loading = true //later\n\n    const debounced = useDebouncedCallback(\n        async searchQuery => {\n            if (searchQuery) {\n                let result = await doSearch(searchQuery)\n                if (result.status === 200) {\n                    setSearchResults(result.data)\n                } else {\n                    console.error(result)\n                }\n            }\n        },\n        1000\n    )\n\n    const handleInputChange = e => {\n        if (e.target.value && e.target.value !== searchQuery) {\n            debounced(e.target.value)\n            setSearchQuery(e.target.value)\n        }\n    }\n\n    const options = [{\n        name: 'Name A',\n        id: 'entry_0597856'\n    },{\n        name: 'Name B',\n        id: 'entry_3049854'\n    },{\n        name: 'Name B',\n        id: 'entry_3794654'\n    },{\n        name: 'Name C',\n        id: 'entry_9087345'\n    }]\n\n\n    return (\n        <Autocomplete\n            id='search_freesolo'\n            freeSolo\n            selectOnFocus\n            clearOnBlur\n            handleHomeEndKeys\n            autoHighlight\n            onInputChange={handleInputChange}\n            open={true}\n            onOpen={() => setOpen(true)}\n            onClose={() => setOpen(false)}\n            loading={loading}\n            key={option => option.id}\n\n            options={options}\n            getOptionLabel={option => option.name}\n\n            renderOption={(props, option) => (\n                <Box\n                    component='li'\n                    {...props}\n                >\n                    {option.name}\n                </Box>\n            )}\n\n            renderInput={params => {\n                return (\n                    <TextField\n                        {...params}\n                        required\n                        id="search_bar"\n                        label="Search"\n                        InputProps={{\n                            ...params.InputProps,\n                            endAdornment: (\n                                <React.Fragment>\n                                    {loading ? <CircularProgress size={18} /> : null}\n                                    {params.InputProps.endAdornment}\n                                </React.Fragment>\n                            )\n                        }}\n                    />\n                )}\n            }\n            \n        />\n    )\n}\n

\n

Answer 1

您可以定义自己的renderOption，可以返回具有正确键值的列表项。您的代码抱怨重复的密钥，因为默认情况下，Autocomplete 使用 getOptionLabel(option)来检索密钥：

<Autocomplete
  renderOption={(props, option) => {
    return (
      <li {...props} key={option.id}>
        {option.name}
      </li>
    );
  }}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>

如果仍然不起作用，请检查您的 props 顺序，如果您将 key props 放在回调提供的 props 之前，则需要最后声明 key props：

<Box component='li' key={key} {...props}

然后它将被props.keyMUI 覆盖。应该是这样的：

<Box component='li' {...props} key={key}

现场演示