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

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

由于您一次只能选择打开，因此没有理由将模式包装在数组中，因此实际上，您的代码将失败，因为数组没有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并设置一个值时，返回值将不会按您希望的那样加载。让我知道是否可行。

在Material-UI的“自动完成”字段中设置默认值

2 个答案: