在 Material-UI 的自动完成字段中设置默认值
Set default value in Autocomplete field of Material-UI
我正在尝试将默认值设置为自动完成,其值是从 useEffect 挂钩中的 URL 获取的,但我无法这样做。
我正在从 URL 中获取一些数据,然后将其设置为 selectedMode & 变量 selectedMode 用于在自动完成字段中设置默认值,但是如果我在所选中设置一些默认值mode - 它被设置为自动完成字段中的默认值,但即使更新后该值也没有改变。
我认为这是因为在从 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"
/>}
/>
<>
)
我尝试的替代方法不是设置默认值,而是使用 - 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)
您的第二个解决方案应该可行,但您应该进行以下一些更改:
由于您一次只能 select,因此没有理由将模式包装在数组中,实际上您的代码将失败,因为数组没有名称 属性。
value
应该是 options
数组的一项,传递实际对象,而不仅仅是 name
属性。
你不应该为没有 selection 使用虚拟对象,而是使用 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"
/>}
/>
<>
)
这只是一个想法,尝试设置一个加载变量,然后在useEffect中将其设置为false。在 if 中使用此变量在加载为 false 时呈现您的自动完成。
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 不会按您的意愿加载它。
让我知道这是否有效。
我正在尝试将默认值设置为自动完成,其值是从 useEffect 挂钩中的 URL 获取的,但我无法这样做。
我正在从 URL 中获取一些数据,然后将其设置为 selectedMode & 变量 selectedMode 用于在自动完成字段中设置默认值,但是如果我在所选中设置一些默认值mode - 它被设置为自动完成字段中的默认值,但即使更新后该值也没有改变。
我认为这是因为在从 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"
/>}
/>
<>
)
我尝试的替代方法不是设置默认值,而是使用 - 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)
您的第二个解决方案应该可行,但您应该进行以下一些更改:
由于您一次只能 select,因此没有理由将模式包装在数组中,实际上您的代码将失败,因为数组没有名称 属性。
value
应该是 options
数组的一项,传递实际对象,而不仅仅是 name
属性。
你不应该为没有 selection 使用虚拟对象,而是使用 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"
/>}
/>
<>
)
这只是一个想法,尝试设置一个加载变量,然后在useEffect中将其设置为false。在 if 中使用此变量在加载为 false 时呈现您的自动完成。
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 不会按您的意愿加载它。 让我知道这是否有效。