我可以使用 useState 在 state 中设置最小值和最大值吗？答案

【问题标题】：Can I set a minimum and maximum value in state using useState?我可以使用 useState 在 state 中设置最小值和最大值吗？
【发布时间】：2021-08-24 01:51:40
【问题描述】：

我有一个简单的状态，其中对象的每个属性都应该有一个 0-100 的最小值-最大值。也就是 0-100 之间的体积，等等。现在如果我降低音量，它会变成负数。我在哪里可以为此设置最小值？

  const [controls, setControls] = useState({
    volume: 0,
    bass: 0,
    mid: 0,
    treble: 0,
  });

  const volumeDecrease = () => {
    setControls({
      volume: controls.volume - 1,
    });
  };

【问题讨论】：

简单：如果controls.volume 为0，则不允许发生setControls 调用。另请参见this.state inside setState ReactJS 和react docs -- state updates may be asynchronous

标签： reactjs react-hooks

【解决方案1】：

您可以在设置状态函数周围包裹一个条件。

  const [controls, setControls] = useState({
    volume: 0,
    bass: 0,
    mid: 0,
    treble: 0,
  });

  const volumeDecrease = () => {
    if(volume > 0 && volume < 100){
        setControls({
          volume: controls.volume - 1,
        });
    }

  };

【讨论】：