如何在Material-UI自动完成组件中动态选择默认选项？

Question

我正在寻找一种在Autocomplete组件中预设默认选项的方法，正当ajax调用完成加载选项列表时。因此，用例将是这样的：当用户打开页面时，在后台会从ajax响应中将选项列表加载到状态中。我想从列表中选择第一个检索到的选项，因为它会被加载。目前，我只是提供一种选项列表的基本方法：

  <Autocomplete
     options={defaultProps.options}
     getOptionLabel={option => option.name}
                 renderInput={params => (
                  <TextField {...params} variant="outlined" fullWidth />
     )}
  />

但在加载时不知道选择第一个。

Answer 1

我通过添加一个称为loaded的标志来声明状态，并在获取数据后将其设置为true，从而解决了这个问题。然后将自动完成组件包装起来。因此，它将获取数据并设置选项和标志值。为了选择第一个选项，我使用了defaultValue属性，如自动完成api中所述。 （https://material-ui.com/api/autocomplete/）

import "isomorphic-fetch";
import React, { Component } from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default class Asynchronous extends Component {
  constructor() {
    super();
    this.state = { options: [], loaded: false };
  }
  async componentDidMount() {
    const response = await fetch(
      "https://country.register.gov.uk/records.json?page-size=5000"
    );
    const countries = await response.json();

    this.setState({
      options: Object.keys(countries).map(key => countries[key].item[0]),
      loaded: true
    });
  }
  render() {
    const { options, loaded } = this.state;
    return (
      <div>
        {loaded ? (
          <Autocomplete
            id="asynchronous-demo"
            style={{ width: 300 }}
            getOptionSelected={(option, value) => option.name === value.name}
            getOptionLabel={option => option.name}
            options={options}
            defaultValue={options[0]}
            renderInput={params => (
              <TextField
                {...params}
                label="Asynchronous"
                fullWidth
                variant="outlined"
                InputProps={{
                  ...params.InputProps,
                  endAdornment: (
                    <React.Fragment>
                      {params.InputProps.endAdornment}
                    </React.Fragment>
                  )
                }}
              />
            )}
          />
        ) : null}
      </div>
    );
  }
}

Answer 2

我正在使用useEffect来演示组件安装上的ajax请求。

您可以在组件渲染后使用value属性设置值。

在等待ajax请求解决时，可以使用loading属性将组件模式更改为loading

const [options, setOptions] = useState([]);
  const [def, setDef] = useState(null);

  useEffect((()=>{
    setTimeout(()=>{
      const tempArr = [{name:'Subject'},{name:'Another Subject'}];
      setOptions(tempArr);
      setDef(tempArr[0]);
    }, 1000);
  }), []);

  return (
    <div className="App">
      <h1>Autocomplete</h1>
      {<Autocomplete
        options={options}
        loading={!def}
        value={def}
        getOptionLabel={option => option.name}
          renderInput={params => (
              <TextField {...params} variant="outlined" fullWidth />
        )}
      />}
    </div>
  );