Question

我正在使用“材料UI”自动完成组件在我的表单中呈现下拉菜单。但是，如果用户要编辑对象，则下拉列表应显示为自动填充的值，该值将从数据库中获取。

我尝试使用下面的代码来模拟情况

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

export default class Sizes extends Component {
    state = {
        default: []
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({ default: [...this.state.default, top100Films[37]]})
        })
    }

    render() {
        return (
                <Autocomplete
                    id="size-small-standard"
                    size="small"
                    options={top100Films}
                    getOptionLabel={option => option.title}
                    defaultValue={this.state.default}
                    renderInput={params => (
                        <TextField
                            {...params}
                            variant="standard"
                            label="Size small"
                            placeholder="Favorites"
                            fullWidth
                        />
                    )}
                />
        );
    }
}

在安装组件之后，我要设置超时并返回默认值，该默认值应显示在下拉菜单中

但是，它无法在下拉列表中显示该值，并且我在控制台中看到此错误-

index.js:1375 Material-UI: the `getOptionLabel` method of useAutocomplete do not handle the options correctly.
The component expect a string but received undefined.
For the input option: [], `getOptionLabel` returns: undefined.

显然，当componentDidMount被调用时状态正在更新，但是Autocomplete组件的defaultValue属性无法读取相同的内容

你知道我在这里出什么毛病吗？

代码沙箱链接-https://codesandbox.io/s/dazzling-dirac-scxpr?fontsize=14&hidenavigation=1&theme=dark

Answer 1

对于遇到此问题的其他任何人，仅使用value而不是defaultValue的解决方案是不够的。一旦自动完成功能失去焦点，它将恢复为原始值。

手动设置状态将起作用：

https://codesandbox.io/s/elegant-leavitt-v2i0h

Answer 2

以下是您的代码出错的原因：

1] defaultValue接受默认情况下必须选择的值，不应将数组传递给此prop。

2]除非您的自动完成功能不是multiple，否则无法将数组传递给value或inputValue道具。

Answer 3

好吧，我实际上能够完成这项工作。原来我使用的是错误的道具。我刚刚将defaultValue更改为value并成功了。

更新的代码笔链接-codesandbox.io/s/dazzling-dirac-scxpr

React Material UI自动完成中的异步默认值问题

3 个答案: