Блог

Я пытаюсь создать панель поиска автозаполнения / автозаполнения из Material-UI через ответ API. Вот приложение к кодовой базе за приложением.

Мы определяем наши параметры панели поиска с автоматическим предложением из предоставленного API coinlist. Здесь мы также определяем состояние наших параметров.

 function MainInput() {
    const classes = useStyles();
    const [options, setOptions] = useState([]);

    useEffect(() => {
        axios
            .get(`https://min-api.cryptocompare.com/data/all/coinlist`)
            .then((res) => {
                console.log(res.data.Data);
                setOptions(res.data.Data);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);
  

Теперь в документах из материала-пользовательский интерфейс для <Autocomplete /> компонента. Предполагается, что мы определили наши параметры в options prop. Теоретически, все должно быть хорошо, верно? Ну, сначала приложение react загружается нормально, но когда я нажимаю на панель поиска, все исчезает с экрана. Кто-нибудь может предложить какие-либо идеи?

 return (
        <div className={classes.root}>
            <Autocomplete
                id='combo-box-demo'
                options={options}
                getOptionLabel={(options) => options}
                style={{ width: 300 }}
                renderInput={(params) => (
                    <TextField {...params} label='Combo box' variant='outlined' />
                )}
            />
        </div>
    );
}
  

Вот как выглядит необработанный ответ API, чтобы у вас, ребята, была идея.

 "Response": "Success",
    "Message": "Coin list succesfully returned!",
    "Data": {
        "42": {
            "Id": "4321",
            "Url": "/coins/42/overview",
            "ImageUrl": "/media/35650717/42.jpg",
            "ContentCreatedOn": 1427211129,
            "Name": "42",
            "Symbol": "42",
            "CoinName": "42 Coin",
            "FullName": "42 Coin (42)",
            "Algorithm": "Scrypt",
            "ProofType": "PoW/PoS",
            "FullyPremined": "0",
            "TotalCoinSupply": "42",
            "BuiltOn": "N/A",
            "SmartContractAddress": "N/A",
            "DecimalPlaces": 0,
            "PreMinedValue": "N/A",
            "TotalCoinsFreeFloat": "N/A",
            "SortOrder": "34",
            "Sponsored": false,
            "Taxonomy": {
                "Access": "",
                "FCA": "",
                "FINMA": "",
                "Industry": "",
                "CollateralizedAsset": "",
                "CollateralizedAssetType": "",
                "CollateralType": "",
                "CollateralInfo": ""
            },
            "Rating": {
                "Weiss": {
                    "Rating": "",
                    "TechnologyAdoptionRating": "",
                    "MarketPerformanceRating": ""
                }
            },
            "IsTrading": true,
            "TotalCoinsMined": 41.9999522,
            "BlockNumber": 200520,
            "NetHashesPerSecond": 0,
            "BlockReward": 0,
            "BlockTime": 0
        },{...}
  

Существует проблема с вашими данными, поступающими из ОТВЕТА API. Согласно Material-UI, параметр, который вы передаете в options, должен быть в массиве, но ваш параметр является объектом.

Пожалуйста, преобразуйте тип данных в Array вместо Object, и он будет работать!

     return (
        <div className={classes.root}>
            <Autocomplete
                id='combo-box-demo'
                options={options} // this should be in An Array
                getOptionLabel={(option) =>option} //go through one option at a time
                style={{ width: 300 }}
                renderInput={(params) => (
                    <TextField {...params} label='Combo box' variant='outlined' />
                )}
            />
        </div>
    );
}
  

Пожалуйста, ознакомьтесь с официальными документами Material-UI
https://material-ui.com/components/autocomplete /