reactjs - 自动完成未按预期呈现 Material UI
问题描述
我的自动完成组件正在从 API 中提取书籍列表。我将它们呈现为 Autocomplete 组件中的选项,并将它们输出为页面底部的列表以进行调试。还从 API 输出 JSON。
两个问题似乎交织在一起。首先,自动完成选项似乎并非全部呈现。最多有 10 个结果(API 调用限制为 10 个),它们都出现在自动完成下方的列表中,但不在自动完成的选项列表中。其次,当调用 API 时(例如将文本从“abc”更改为“abcd”之间的时间),它显示“无选项”,而不是仅显示“abc”中的选项。
在此处的沙箱代码中尝试慢慢输入 - 1 2 3 4 5 6 - 你会<ul>
看到<Autocomplete>
.
关于为什么会发生这种情况(或者可能两者都发生)的任何想法?
谢谢!
沙盒中的代码:
import React, { useState, useEffect } from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";
import {
makeStyles,
Typography,
Popper,
InputAdornment,
TextField,
Card,
CardContent,
CircularProgress,
Grid,
Container
} from "@material-ui/core";
import MenuBookIcon from "@material-ui/icons/MenuBook";
import moment from "moment";
// sample ISBN: 9781603090254
function isbnMatch(isbn) {
const str = String(isbn).replace(/[^0-9a-zA-Z]/, ""); // strip out everything except alphanumeric
const r = /^[0-9]{13}$|^[0-9]{10}$|^[0-9]{9}[Xx]$/; // set the regex for 10, 13, or 9+X characters
return str.match(r);
// return str.match(/^[0-9]{3}$|^[0-9]{3}$|^[0-9]{2}[Xx]$/);
}
const useStyles = makeStyles((theme) => ({
adornedEnd: {
backgroundColor: "inherit",
height: "2.4rem",
maxHeight: "3rem"
},
popper: {
maxWidth: "fit-content"
}
}));
export default function ISBNAutocomplete() {
console.log(`Starting ISBNAutocomplete`);
const classes = useStyles();
const [options, setOptions] = useState([]);
const [inputText, setInputText] = useState("");
const [open, setOpen] = useState(false);
const loading = open && options.length === 0 && inputText.length > 0;
useEffect(() => {
async function fetchData(searchText) {
const isbn = isbnMatch(searchText);
//console.log(`searchText = ${searchText}`);
//console.log(`isbnMatch(searchText) = ${isbn}`);
const fetchString = `https://www.googleapis.com/books/v1/volumes?maxResults=10&q=${
isbn ? "isbn:" + isbn : searchText
}&projection=full`;
//console.log(fetchString);
const res = await fetch(fetchString);
const json = await res.json();
//console.log(JSON.stringify(json, null, 4));
json && json.items ? setOptions(json.items) : setOptions([]);
}
if (inputText?.length > 0) {
// only search the API if there is something in the text box
fetchData(inputText);
} else {
setOptions([]);
setOpen(false);
}
}, [inputText, setOptions]);
const styles = (theme) => ({
popper: {
maxWidth: "fit-content",
overflow: "hidden"
}
});
const OptionsPopper = function (props) {
return <Popper {...props} style={styles.popper} placement="bottom-start" />;
};
console.log(`Rendering ISBNAutocomplete`);
return (
<>
<Container>
<h1>Autocomplete</h1>
<Autocomplete
id="isbnSearch"
options={options}
open={open}
//noOptionsText=""
style={{ width: 400 }}
PopperComponent={OptionsPopper}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
onChange={(event, value) => {
console.log("ONCHANGE!");
console.log(`value: ${JSON.stringify(value, null, 4)}`);
}}
onMouseDownCapture={(event) => {
event.stopPropagation();
console.log("STOPPED PROPAGATION");
}}
onInputChange={(event, newValue) => {
// text box value changed
//console.log("onInputChange start");
setInputText(newValue);
// if ((newValue).length > 3) { setInputText(newValue); }
// else { setOptions([]); }
//console.log("onInputChange end");
}}
getOptionLabel={(option) =>
option.volumeInfo && option.volumeInfo.title
? option.volumeInfo.title
: "Unknown Title"
}
getOptionSelected={(option, value) => option.id === value.id}
renderOption={(option) => {
console.log(`OPTIONS LENGTH: ${options.length}`);
return (
<Card>
<CardContent>
<Grid container>
<Grid item xs={4}>
{option.volumeInfo &&
option.volumeInfo.imageLinks &&
option.volumeInfo.imageLinks.smallThumbnail ? (
<img
src={option.volumeInfo.imageLinks.smallThumbnail}
width="50"
height="50"
/>
) : (
<MenuBookIcon size="50" />
)}
</Grid>
<Grid item xs={8}>
<Typography variant="h5">
{option.volumeInfo.title}
</Typography>
<Typography variant="h6">
(
{new moment(option.volumeInfo.publishedDate).isValid()
? new moment(option.volumeInfo.publishedDate).format(
"yyyy"
)
: option.volumeInfo.publishedDate}
)
</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
);
}}
renderInput={(params) => (
<>
<TextField
{...params}
label="ISBN - 10 or 13 digit"
//"Search for a book"
variant="outlined"
value={inputText}
InputProps={{
...params.InputProps, // make sure the "InputProps" is same case - not "inputProps"
autoComplete: "new-password", // forces no auto-complete history
endAdornment: (
<InputAdornment
position="end"
color="inherit"
className={classes.adornedEnd}
>
<>
{loading ? (
<CircularProgress color="secondary" size={"2rem"} />
) : null}
</>
{/* <>{<CircularProgress color="secondary" size={"2rem"} />}</> */}
</InputAdornment>
),
style: {
paddingRight: "5px"
}
}}
/>
</>
)}
/>
<ul>
{options &&
options.map((item) => (
<li key={item.id}>{item.volumeInfo.title}</li>
))}
</ul>
<span>
inputText: <pre>{inputText && inputText}</pre>
</span>
<span>
<pre>
{options && JSON.stringify(options, null, 3).substr(0, 500)}
</pre>
</span>
<span>Sample ISBN: 9781603090254</span>
</Container>
</>
);
}
解决方案
默认情况下,按当前输入值Autocomplete
过滤当前选项数组。在选项是静态的用例中,这不会导致任何问题。即使选项是异步加载的,如果查询匹配的数量有限,这也会导致问题。在您的情况下,获取执行与maxResults=10
所以最多只返回 10 个匹配项。因此,如果您缓慢地输入“123”,则输入“1”会返回 10 个匹配“1”的匹配项,并且这些匹配项都不包含“12”,因此一旦您输入“2”,这 10 个选项都不会匹配新的输入值,因此它被过滤为一个空数组,并显示“无选项”文本,直到“12”的提取完成。如果您现在删除“2”,您将不会看到问题重复,因为“12”的所有选项也包含“1”,因此在通过输入值过滤后仍然显示选项。如果“1”的所有匹配项都已返回,您也不会看到此问题,因为其中一些选项也将包含“12”
幸运的是,解决这个问题很容易。如果您想Autocomplete
始终显示您提供的选项(假设您将options
根据输入值的更改异步修改道具),您可以覆盖其filterOptions
功能,使其不进行任何过滤:
<Autocomplete
id="isbnSearch"
options={options}
filterOptions={(options) => options}
open={open}
...
自动完成自定义过滤器文档:https ://material-ui.com/components/autocomplete/#custom-filter
推荐阅读
- android - 如何使用从 Delphi 应用程序通过蓝牙发送的 AT 命令来命令安卓手机?
- scroll - 向下滚动 insagram 上的无限页面,以抓取喜欢该帖子的人
- gradle - 如何在 openApi 生成时禁用 springfox 导入?
- java - GCM (legacy FCM) 发送 GOAWAY HTTP/2 帧
- node.js - 我正在开发一个不和谐的机器人,但我一直收到这个错误
- svg - SVG 过滤器仅适用于两个非常相似的 SVG 之一中的路径
- php - 致命错误 my_sql_num_rows()
- excel - 我可以使用 VBA 通过单击 Excel 数据透视表中的单元格来访问原始数据记录吗?
- go - 使用 dgrijalva/jwt-go golang 包解析 RS256 公钥时出现问题
- debugging - 合并来自多个 elf 文件的调试信息