material-ui 抑制物料UI选择组件超出范围错误

liwlm1x9  于 2022-10-29  发布在  其他
关注(0)|答案(4)|浏览(138)
  • 我已经搜索了此存储库的issues,并认为这不是重复的。

摘要💡

当创建托管的Select字段且尚未加载值时,将弹出以下错误:

Material-UI: You have provided an out-of-range value `NL` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are "".

这种错误是难以摆脱的,应该可以压制吧?
虽然可以通过在加载过程中不显示Select组件来避免这个错误,但这与现代网页尽快显示数据的想法不同。
例如,用户页面可以显示当前选定的国家/地区,同时仍加载国家/地区列表。
错误应可抑制/可忽略,以免日志中出现长错误消息。
示例🌈

export const ChangeCountryView = function ChangeCountryView(props:)  {
    const {user}  = props

    const [mainList, setMainList] = React.useState<string[]>([]);
    React.useEffect(() => {
        someLoader.loadCountryListFromServer().then((loadedList) => {
            setMainList(loadedList);
        });
    }, []);
    return <Select value={user.country}>{
        Array.from(mainList, (v) => {
            return <MenuItem key={v} value={v}>{v}</MenuItem>
        });
    }</Select>
}

动机🔦

要启用渐进式加载页面,这将真正有帮助,同时实际上改进了工具来修复实际的错误。

eivgtgni

eivgtgni1#

我建议在你认为选项已经加载完毕之前不要设置这个值。从长远来看,这是一个比隐藏警告更安全的选择。隐藏警告可能会隐藏合法的错误。

fxnxkyjh

fxnxkyjh2#

我建议在你认为选项已经加载完毕之前不要设置这个值。从长远来看,这是一个比隐藏警告更安全的选择。隐藏警告可能会隐藏合法的错误。
如果我没有设置值,然后在加载选项时设置它,我会得到“从未控制到控制的变化”错误。
(from我的mui4内存,可能在v5中已更改)
此外,不设置该值比直接保留它要做更多的工作:

<Select
   value={user.role}
   options=[roles]
 />

<Select
   value={roles ? user.role : null}
   options=[roles]
 />
c8ib6hqw

c8ib6hqw3#

如果我没有设置值,然后在加载选项时设置它,我会得到“从未控制到控制的变化”错误。
将其设置为空字符串。
此外,不设置该值比直接保留它要做更多的工作:
与我们无法警告的潜在问题相比,这种差异微不足道。

dauxcl2d

dauxcl2d4#

我建议在你认为选项已经加载完毕之前不要设置这个值。从长远来看,这是一个比隐藏警告更安全的选择。隐藏警告可能会隐藏合法的错误。
真的是这样吗?与其在警告设置周围设置一个条件(一旦所有内容都加载完毕,警告设置就会被启用),不如在实际数据点上设置一个条件。这两次都只是一个可能会失败/让人吃惊的条件。但是在针对数据的版本中,突然看到选择值为“空”可能意味着两件事:条件(检查是否已加载所有内容)失败...或者数据确实为空且不期望。
而失败的特定设置 * 仅 * 用于该条件,以检查数据是否已加载。
但除此之外,一个更重要的问题是(在我们的例子中)实际的数据只有在你做了其他事情之后才被加载。而值却被提前显示了。(其他事情,比如打开Select会触发数据的加载,而其他菜单会过滤Select中显示的内容)。
因此,在数据加载 * 之前 * 显示当前值是我们需要/喜欢的一个特性。

相关问题