來自 API 響應的自動完成欄反應未呈現

Question

我正在嘗試從Material-UI到 API 響應創建一個自動完成/自動建議搜索欄。 這是附件中的代碼庫附件。

我們正在從提供的給定硬幣列表 API 中定義自動建議搜索欄的選項。 我們也在此處定義我們的選項 state。

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);
            });
    }, []);

現在在來自Material-UI的文檔中，用於<Autocomplete />組件。 我們應該在options道具中定義我們的選項。 從理論上講，一切都應該沒問題吧？ 好吧，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
        },{...}

Answer 1

來自API RESPONSE的數據存在問題。 根據Material-UI ，您傳遞給選項的參數應該在數組中，但您的參數是Object 。

請將數據類型轉換為數組而不是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/