useEffect 每隔一次点击就重新渲染两次

Question

我正在尝试使用一个简单的 4 按钮组件来切换每个按钮的类，以便一次只有 1 个是 active。我在按钮上使用了以下代码。

<NavLink
          to="/"
          className={On ? "nav-link-active" : "nav-link"}
          onClick={() => {
            setOn(true);
          }}
        >

我在所有 4 个按钮上都使用状态

const [On, setOn] = useState(false);
  const [On2, setOn2] = useState(false);
  const [On3, setOn3] = useState(false);
  const [On4, setOn4] = useState(false);

最后我使用了一个简单的 if 语句来确保一次只有一个按钮可以保持活动状态。

useEffect(() => {
    console.log("useeffect");
    if (On === true) {
      setOn2(false);
      setOn3(false);
      setOn4(false);
    }
    if (On2 === true) {
      setOn(false);
      setOn3(false);
      setOn4(false);
    }
    if (On3 === true) {
      setOn2(false);
      setOn(false);
      setOn4(false);
    }
    if (On4 === true) {
      setOn(false);
      setOn3(false);
      setOn2(false);
    }
  }, [On, On2, On3, On4]);
// I know there's probably a better way to do this, it was just a quick fix.

这在大多数情况下都有效，除了问题是useEffect() 将在每隔一次点击时运行两次。然后重置按钮。

我没有过多地使用 UseEffect()，所以我不确定为什么会发生这种情况。如何阻止它重新渲染两次？我的完整代码是viewable here。

Answer 1

仅使用单个状态变量而不是多个状态变量，因此您不需要任何useEffect。您可以有一个指示当前“打开”按钮的索引，0 到 3，或 -1 表示无（遵循通常的 JS 编号约定）：

const [buttonOn, setButtonOn] = useState(-1);

然后，对于问题中的 JSX，请改用：

<NavLink
          to="/"
          className={buttonOn === 0 ? "nav-link-active" : "nav-link"}
          onClick={() => {
            setButtonOn(0);
          }}
        >

而下一个 Nav 将有 buttonOn === 1 ? 和 setButtonOn(1) 等。

根据其他导航及其内容，您可以通过在映射器函数中使用索引而不是写出每个导航来减少重复。