reactjs - 自动完成未按预期呈现 Material UI

Question

我的自动完成组件正在从 API 中提取书籍列表。我将它们呈现为 Autocomplete 组件中的选项，并将它们输出为页面底部的列表以进行调试。还从 API 输出 JSON。

两个问题似乎交织在一起。首先，自动完成选项似乎并非全部呈现。最多有 10 个结果(API 调用限制为 10 个)，它们都出现在自动完成下方的列表中，但不在自动完成的选项列表中。其次，当调用 API 时(例如将文本从“abc”更改为“abcd”之间的时间)，它会显示“无选项”，而不是仅显示“abc”中的选项。

在沙盒代码here 尝试慢慢输入 - 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>
    </>
  );
}

Answer 1

默认情况下，自动完成 filters the current options当前输入值的数组。在选项是静态的用例中，这不会导致任何问题。即使选项是异步加载的，如果查询匹配的数量有限，这也会导致问题。在您的情况下，使用 maxResults=10 执行提取，因此最多只返回 10 个匹配项。因此，如果您输入“123”的速度很慢，输入“1”会返回 10 个匹配“1”的匹配项，并且这些匹配项都不包含“12”，因此一旦您输入“2”，这 10 个选项都不会匹配新的输入值，因此它被过滤为一个空数组，并显示“无选项”文本，直到“12”的提取完成。如果您现在删除“2”，您将不会看到问题重复出现，因为“12”的所有选项也包含“1”，因此在通过输入值过滤后仍然会显示选项。如果返回了“1”的所有匹配项，您也不会看到此问题，因为其中一些选项也将包含“12”，因此当您键入“2”时，选项只会被过滤到该子集。

幸运的是，解决这个问题很容易。如果您希望 Autocomplete 始终显示您提供的选项(假设您将根据输入值的更改异步修改 options 属性)，您可以覆盖其 filterOptions 函数，使其不进行任何过滤:

        <Autocomplete
          id="isbnSearch"
          options={options}
          filterOptions={(options) => options}
          open={open}
          ...

自动完成自定义过滤器文档:https://material-ui.com/components/autocomplete/#custom-filter