- 我已经搜索了此存储库的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>
}
动机🔦
要启用渐进式加载页面,这将真正有帮助,同时实际上改进了工具来修复实际的错误。
4条答案
按热度按时间eivgtgni1#
我建议在你认为选项已经加载完毕之前不要设置这个值。从长远来看,这是一个比隐藏警告更安全的选择。隐藏警告可能会隐藏合法的错误。
fxnxkyjh2#
我建议在你认为选项已经加载完毕之前不要设置这个值。从长远来看,这是一个比隐藏警告更安全的选择。隐藏警告可能会隐藏合法的错误。
如果我没有设置值,然后在加载选项时设置它,我会得到“从未控制到控制的变化”错误。
(from我的mui4内存,可能在v5中已更改)
此外,不设置该值比直接保留它要做更多的工作:
与
c8ib6hqw3#
如果我没有设置值,然后在加载选项时设置它,我会得到“从未控制到控制的变化”错误。
将其设置为空字符串。
此外,不设置该值比直接保留它要做更多的工作:
与我们无法警告的潜在问题相比,这种差异微不足道。
dauxcl2d4#
我建议在你认为选项已经加载完毕之前不要设置这个值。从长远来看,这是一个比隐藏警告更安全的选择。隐藏警告可能会隐藏合法的错误。
真的是这样吗?与其在警告设置周围设置一个条件(一旦所有内容都加载完毕,警告设置就会被启用),不如在实际数据点上设置一个条件。这两次都只是一个可能会失败/让人吃惊的条件。但是在针对数据的版本中,突然看到选择值为“空”可能意味着两件事:条件(检查是否已加载所有内容)失败...或者数据确实为空且不期望。
而失败的特定设置 * 仅 * 用于该条件,以检查数据是否已加载。
但除此之外,一个更重要的问题是(在我们的例子中)实际的数据只有在你做了其他事情之后才被加载。而值却被提前显示了。(其他事情,比如打开
Select
会触发数据的加载,而其他菜单会过滤Select
中显示的内容)。因此,在数据加载 * 之前 * 显示当前值是我们需要/喜欢的一个特性。