React 状态更新和 useEffect 在 Next.js 应用程序中未按预期运行

Question

我在 Next.js 应用程序中遇到状态更新和 useEffect 的意外行为。我有一个具有锁定/解锁功能的组件，但状态更新和副作用没有按照我的预期发生。这是相关代码：

const [isLocked, setIsLocked] = useState(false);

useEffect(() => {
  if (isLocked && index === -1) {
    console.log("Inside use-effect");
    // Logic to change some other state variable
  }
}, [StateVariable#2, isLocked]);

const handleLockClick = () => {
  console.log(isLocked);
  if (!isLocked) {
    setStateVariable#2(true);
    setIsLocked(true);

    // Some other logic

    console.log(isLocked);
    console.log("Clicked!");
  }
  else {
    setStateVariable#2(false);
    setIsLocked(false);
  }
};

当我单击触发

handleLockClick

的按钮时，我得到以下控制台输出：

首先点击：

false
false
Clicked!

第二次点击：

false
false
Clicked!
Inside use-effect

第三次点击：

true

我预计第一次点击后

isLocked

会变成

true

，但前两次点击它仍然是

false

。

useEffect

仅在第二次单击后运行，

isLocked

仅在第三次单击时显示为

true

。

问题：

1. 为什么第一次点击时

   isLocked

   没有更新为

   true

   ？
2. 为什么

   useEffect

   仅在第二次单击后才运行？
3. 如何修改代码以使状态更新并

   useEffect

   在第一次单击时按预期运行？

我尝试使用

setState

的函数形式，但问题仍然存在：

const handleLockClick = () => {
  setIsLocked(prevIsLocked => {
    console.log(prevIsLocked);
    if (!prevIsLocked) {
      setStateVariable#2(true);
      // Other logic...
      console.log("Clicked!");
      return true;
    } else {
      setStateVariable#2(false);
      return false;
    }
  });
};

任何有关可能导致此行为的原因以及如何解决此问题的见解将不胜感激。谢谢！

Answer 1

您能提供更多信息吗？ “索引”从何而来以及何时发生变化？

HandleLockClick 可以这样简化：

  const handleLockClick = () => {
    const newValue = !isLocked
    setStateVariable(newValue)
    setIsLocked(newValue)
}

你真的需要使用useEffect吗？如果没有看到你的 HTML，就很难理解应该发生什么