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 语句来确保一次只有 1 个按钮可以保持活动状态。

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()，所以我不确定为什么会发生这种情况。如何阻止它重新渲染两次？预先感谢您的帮助。
我的完整代码可见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);
          }}
        >

下一个导航将有 buttonOn === 1 ? 和 setButtonOn(1) 等。

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

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

1 个答案: