我正在尝试创建一个 Material UI range Slider,它上面有两个值。如果我设置它会起作用:
const [value, setValue] = React.useState([5,20]);
const [value, setValue] = React.useState([val]);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<Typography id="range-slider" gutterBottom>
Temperature range
</Typography>
<Slider
value={value}
onChange={handleChange}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
getAriaValueText={valuetext}
/>
<Input value={value} />
</div>
);
但是,如果我像这样设置一个值并将其分配给 useState 常量,它就不起作用。即使有错误,我也不明白为什么:var val = [5,20]
const [value, setValue] = React.useState([val])
我收到此错误:Warning: Failed prop type: Invalid prop `value` supplied to `ForwardRef(Slider)`.
in ForwardRef(Slider) (created by WithStyles(ForwardRef(Slider)))
in WithStyles(ForwardRef(Slider)) (at demo.js:32)
in div (at demo.js:28)
in RangeSlider (at index.js:6)
slider 仍然渲染,但只有 1 个点而不是 2 个点
最佳答案
将 val 传递给 useState 时,您是否尝试过删除 [] 括号。我得到的警告的含义是它需要一个数组,但是当 [val] 被传递时它得到了一个数组数组。
关于javascript - 警告 : Failed prop type: Invalid prop `value` supplied to `ForwardRef(Slider)` ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64175786/