react使用mui里的Autocomplete组件报错问题

山不让尘233

于 2024-01-11 11:33:36 发布

阅读量807

点赞数 12

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_73656344/article/details/135523152

版权

文章讲述了在使用Autocomplete组件时，如何修正因将带有key属性的对象直接用在JSX中的警告，并提供了正确的代码示例，包括使用`renderOption`和`renderTags`来处理选项渲染。

摘要由CSDN通过智能技术生成

Autocomplete报错Warning: A props object containing a "key" prop is being spread into JSX: let props = {key: someKey, tabIndex: ..., role: ..., id: ..., onMouseMove: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: ..., aria-selected: ..., className: ..., children: ...}; <li {...props} /> React keys must be passed directly to JSX without using spread: let props = {tabIndex: ..., role: ..., id: ..., onMouseMove: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: ..., aria-selected: ..., className: ..., children: ...}; <li key={someKey} {...props} />

解决方法:

原代码

<Autocomplete
              disablePortal
              id="combo-box-demo"
              options={keyword}
              filterOptions={function (options: { label: string; key: string; title: string; }[]): { label: string; key: string; title: string; }[] {
                const mate = keyword.filter((suggestion) =>
                  suggestion.title.toLowerCase().includes(inputValue)
                );
                return mate
              }}
              getOptionLabel={function (mate) {
                return mate.label
              }}
              sx={{ width: 580, background: "#f8fafb", borderRadius: '8px' }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  placeholder="欢迎使用服务支持"
                  onFocus={clearPlaceholderText}
                  onBlur={restorePlaceholderText}
                  InputProps={{
                    ...params.InputProps,
                    endAdornment: (
                      <InputAdornment position="end">
                        <IconButton className="iconBtn">
                          <SearchIcon />
                        </IconButton>
                      </InputAdornment>
                    ),
                  }}
                />
              )}
              onChange={(event, value) => handleSearch(value)}
              noOptionsText={<CustomNoOptions />}
              open={open}
              onClose={() => setOpen(false)}
              onInputChange={handleInputChange}
              value={selectedOption}
            />

加入这些即可

import Chip from '@mui/material/Chip';

renderOption={(props, option) => {
                const key: any = option.key;
                const { ...otherProps } = props;
                return (
                  <li {...otherProps} key={key}>
                    {option.label}
                  </li>
                );
              }}
              renderTags={(tagValue, getTagProps) => {
                return tagValue.map((option, index) => (
                  <Chip {...getTagProps({ index })} key={option.key} label={option.label} />
                ))
              }}

最终代码

<Autocomplete
              disablePortal
              id="combo-box-demo"
              options={keyword}
              filterOptions={function (options: { label: string; key: string; title: string; }[]): { label: string; key: string; title: string; }[] {
                const mate = keyword.filter((suggestion) =>
                  suggestion.title.toLowerCase().includes(inputValue)
                );
                return mate
              }}
              getOptionLabel={function (mate) {
                return mate.label
              }}
              sx={{ width: 580, background: "#f8fafb", borderRadius: '8px' }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  placeholder="欢迎使用服务支持"
                  onFocus={clearPlaceholderText}
                  onBlur={restorePlaceholderText}
                  InputProps={{
                    ...params.InputProps,
                    endAdornment: (
                      <InputAdornment position="end">
                        <IconButton className="iconBtn">
                          <SearchIcon />
                        </IconButton>
                      </InputAdornment>
                    ),
                  }}
                />
              )}
              onChange={(event, value) => handleSearch(value)}
              noOptionsText={<CustomNoOptions />}
              open={open}
              onClose={() => setOpen(false)}
              onInputChange={handleInputChange}
              value={selectedOption}
              renderOption={(props, option) => {
                const key: any = option.key;
                const { ...otherProps } = props;
                return (
                  <li {...otherProps} key={key}>
                    {option.label}
                  </li>
                );
              }}
              renderTags={(tagValue, getTagProps) => {
                return tagValue.map((option, index) => (
                  <Chip {...getTagProps({ index })} key={option.key} label={option.label} />
                ))
              }}
            />