时间戳

首页 > 解决方案 > 反应多个状态重置

javascript - 反应多个状态重置

问题描述

我有一堆状态变量，我将它们分开而不是创建一个对象。我不知道这是否是正确的方法，但我有一个函数可以根据变化的 num 输入状态计算和设置状态变量：

  const [isLow, setIsLow] = useState(false);
  const [isMedium, setIsMedium] = useState(false);
  const [isLarge, setIsLarge] = useState(false);
  const [isInfinite, setIsInfinite] = useState(false);

  function handleNum() {
    
    if (num < 120) {
      setIsLow(true);
    } else if (num < 320) {
      setIsMedium(true);
    } else if (num < 600) {
      setIsLarge(true);
    } else if (num >= 600) {
      setIsInfinite(true);
    }

    setCurrentNum(num);
  }

我的问题是第一个数字是 9，然后我将其更改为 500。状态 isLarge 和 isLow 都是正确的。我不想在每个 if 语句中将所有其他状态设置为 false 那么有更好的方法吗？我能想到的唯一另一件事是使用对象作为状态，但它似乎不正确。感觉会很贵。我以前没有使用过减速器，但这是一个使用减速器的好例子吗？

标签： javascriptreactjs

解决方案

如果isLow、isMedium等总是完全依赖于 的值num，那么您不需要对这些变量使用状态。您可以直接在函数组件的主体中分配它们。

const isLow = (num < 120);
const isMedium = (mum >= 120 && num < 320);
const isLarge = (num >= 320 && num < 600);
const isLarge = (num >= 600);

推荐阅读