javascript - 独家反应状态钩子

Question

我有一些布尔反应状态钩子，一次只允许true一个。它们的状态取决于传递的字符串变量。我目前有这个代码，它工作正常：

  const [a, setA] = useState(false);
  const [b, setB] = useState(false);
  const [c, setC] = useState(false);
  const [d, setD] = useState(false);


    if (foo == "string1") {
      setA(true);
      setB(false);
      setC(false);
      setD(false);
    }
    if (foo == "string2") {
      setB(true);
      setA(false);
      setC(false);
      setD(false);
    }
    if (foo == "string3") {
      setC(true);
      setA(false);
      setB(false);
      setD(false);
    }
    if (foo == "string4") {
      setD(true);
      setA(false);
      setB(false);
      setC(false);
    }

我将它们用于条件样式，所以它们必须是布尔值（也许我需要重新考虑我的方法？）。

但是，它非常冗长。有没有更好的方法来写这个？

标签： javascriptreactjsecmascript-6

Answer 1

改为使用单个状态变量，其值包含当前“活动”的变量：

const [active, setActive] = useState();

if (foo === 'string1') {
  setActive('a');
}
if (foo === 'string2') {
  setActive('b');
}
// etc