从 API 响应中反应自动完成栏未呈现答案

【问题标题】：React autocomplete bar from API response not rendering从 API 响应中反应自动完成栏未呈现
【发布时间】：2021-01-25 10:25:46
【问题描述】：

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

我们正在从提供的给定 coinlist 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
        },{...}

【问题讨论】：

标签： javascript reactjs ecmascript-6 axios material-ui

【解决方案1】：

来自 API RESPONSE 的 Data 存在问题。根据 Material-UI，您传递给 options 的参数应该在 Array 中，但您的参数是 Object >.

请将 Data 类型转换为 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/

【讨论】：

谢谢。进行了 Object.entries 转换，效果很好。