Question

我正在尝试通过API响应从 Material-UI 创建一个自动完成/自动建议的搜索栏。这是附件的代码库附件。

我们正在从提供的给定硬币列表API中定义自动建议搜索栏的选项。我们也在这里定义选项状态。

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响应。根据材料界面，传递给选项的参数应该位于 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/

无法呈现API响应中的自动完成栏反应

1 个答案: