在 Material-UI 的 Autocomplete 字段中设置默认值

Question

我正在尝试将默认值设置为自动完成，其值是从 useEffect 挂钩中的 URL 获取的，但我无法这样做。

我正在从 URL 获取一些数据，然后将其设置为 selectedMode 并且变量 selectedMode 用于在自动完成字段中设置默认值，但如果我在所选模式下设置一些默认值 - 它正在设置作为自动完成字段中的默认值，但即使在更新后该值也不会改变。

我认为这是因为自动完成字段在从 URL 接收数据之前被加载。

const [update, setUpdate] = useState([])
const [selectedMode, setSelectedMode] = useState([{ name: '' }])
const mode = [
    { name: 'Air' },
    { name: 'Train' },
    { name: 'Surface' }
]
useEffect(() => {
    axios
        .get(`http://127.0.0.1:8000/bill/${id}`)
        .then(response => {
            const data = response.data
            setUpdate(data)
            setSelectedMode([{ name: data.mode }])
        })
}, [])

return (
        <>
            <Autocomplete
                defaultValue={selectedMode.name ? selectedMode : null}
                options={mode}
                getOptionLabel={option => option.name}
                getOptionSelected={(option, value) => option.name === value.name}
                onChange={(e, value) => setUpdate({
                    ...update,
                    mode: value ? value.name : ''
                })}
                renderInput={params =>
                    <TextField
                        {...params}
                        required
                        label="Mode"
                        variant="outlined"
                    />}
            />
        <>
      )

我尝试的替代方法不是设置 defaultValue，而是使用 - value={selectedMode} - 在 onChange 事件中，我正在更新存储在 selectedMode 中的值。但这也没有给我想要的输出。

下面是代码：-

const [update, setUpdate] = useState([])
const [selectedMode, setSelectedMode] = useState([{ name: '' }])
const mode = [
    { name: 'Air' },
    { name: 'Train' },
    { name: 'Surface' }
]
useEffect(() => {
    axios
        .get(`http://127.0.0.1:8000/bill/${id}`)
        .then(response => {
            const data = response.data
            setUpdate(data)
            setSelectedMode([{ name: data.mode }])
        })
}, [])

return (
        <>
            <Autocomplete
                value={selectedMode.name}
                options={mode}
                getOptionLabel={option => option.name}
                getOptionSelected={(option, value) => option.name === value.name}
                onChange={(e, value) => setSelectedMode([{
                    ...selectedMode,
                    name: value ? value.name : ''
                }])}
                renderInput={params =>
                    <TextField
                        {...params}
                        required
                        label="Mode"
                        variant="outlined"
                    />}
            />
        <>
      )

在未选择任何选项时收到警告：- 警告截图—— warning

警告 --

react_devtools_backend.js:6 Material-UI: The value provided to Autocomplete is invalid.
None of the options match with `{"name":""}`.
You can use the `getOptionSelected` prop to customize the equality test. 
    at Autocomplete (http://localhost:3000/static/js/0.chunk.js:41722:35)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:47043:31)
    at DetailData (http://localhost:3000/static/js/main.chunk.js:1311:86)
    at Route (http://localhost:3000/static/js/0.chunk.js:90811:29)
    at Switch (http://localhost:3000/static/js/0.chunk.js:91013:29)
    at App (http://localhost:3000/static/js/main.chunk.js:207:75)
    at Router (http://localhost:3000/static/js/0.chunk.js:90448:30)
    at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:90082:35)

Answer 1

您的第二个解决方案应该可以工作，但您应该进行一些更改：

由于您一次只能选择 on，因此没有理由将模式包装在数组中，实际上您的代码将失败，因为数组没有 name 属性。

value 应该是options 数组的一项，传递实际对象，而不仅仅是name 属性。 您不应该使用虚拟对象进行无选择，而是使用null。

您的代码应如下所示：

he alternate way i tried is instead of setting defaultValue, I'm using - value={selectedMode} - and on onChange event I'm updating the value stored in selectedMode. But this also didn't give me desired output.

Below is the code :-

const [update, setUpdate] = useState([])
const [selectedMode, setSelectedMode] = useState(null)
const mode = [
    { name: 'Air' },
    { name: 'Train' },
    { name: 'Surface' }
]
useEffect(() => {
    axios
        .get(`http://127.0.0.1:8000/bill/${id}`)
        .then(response => {
            const data = response.data
            setUpdate(data)
            setSelectedMode({ name: data.mode })
        })
}, [])

return (
        <>
            <Autocomplete
                value={selectedMode}
                options={mode}
                getOptionLabel={option => option.name}
                getOptionSelected={(option, value) => option.name === value.name}
                onChange={(e, value) => setSelectedMode({
                    name: value ? value.name : ''
                })}
                renderInput={params =>
                    <TextField
                        {...params}
                        required
                        label="Mode"
                        variant="outlined"
                    />}
            />
        <>
      )

Answer 2

这只是一个想法，尝试设置一个加载变量，然后在 useEffect 中将其设置为 false。在加载为 false 时在 if 中使用此变量来呈现您的自动完成。

const [update, setUpdate] = useState([])
const [selectedMode, setSelectedMode] = useState([{ name: '' }])
const [loading, setLoading] = useState(true)
const mode = [
{ name: 'Air' },
{ name: 'Train' },
{ name: 'Surface' }
]
useEffect(() => {
axios
    .get(`http://127.0.0.1:8000/bill/${id}`)
    .then(response => {
        const data = response.data
        setUpdate(data)
        setSelectedMode([{ name: data.mode }])
        setLoading(false)
    })
}, [])

我相信当您在 useEffect 中并设置一个值时，return 不会按照您的需要加载它。 让我知道这是否有效。