警告：道具类型失败：提供给“ForwardRef(Slider)”的道具“值”无效

Question

我正在尝试创建一个有两个值的 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)

滑块仍然呈现，但只有 1 点而不是 2 点

原文由 theastronomist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在将 val 传递给 useState 时，您是否尝试删除 [] 括号。我得到的警告的含义是它期待一个数组，但是当 [val] 被传递时它得到了一个数组数组。

原文由 Bader 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

就我而言，我没有将字符串转换为数值。属性值需要一个数值或一个数字数组。将值作为字符串传递，例如“23”而不是 23，可能会导致此警告。

原文由 vish213 发布，翻译遵循 CC BY-SA 4.0 许可协议