React+Next.js中useState/useEffect失效问题求助

核心问题1：useEffect 逻辑误用 #

你在useEffect里直接返回console.log，这会被React识别为清理函数（仅在组件卸载或依赖项更新时执行），而非状态更新后触发的主逻辑。你看到的"I pass on the effect with this value : FALSE"其实是上一次渲染的清理日志，并非当前状态更新后的反馈。

核心问题2：状态更新的闭包隐患（优化点） #

changeVal中直接依赖当前val值判断状态，在复杂场景（比如异步操作后更新）下可能因闭包捕获旧值导致异常，建议改用函数式更新规避此问题。

修正后的代码 #

// IMPORTS //
...
import React, { useEffect, useState } from "react";

//FUNCTION PART //

function ContactMe({ pageInfo }: Props) {
  const [val, setVal] = useState(false)
  
  // 改用函数式更新，避免闭包捕获旧值
  const changeVal = () => {
    setVal(prevVal => {
      console.log("I've this :", prevVal);
      const newVal = !prevVal;
      console.log(`I'll become ${newVal ? "TRUE" : "FALSE"}`);
      return newVal;
    });
  };

  useEffect(() => {
    // 状态更新后的逻辑直接写在useEffect内部
    console.log("I pass on the effect with this value :", val);
    
    // 如需清理操作，单独返回清理函数（可选）
    return () => {
      console.log("Cleanup effect with value:", val);
    };
  }, [val])

  console.log("Value is :", val)

//JSX PART //

return (
  <div>
  ...
        <p>My value is : {val.toString()}</p>
        <button onClick={changeVal}>Click here</button>
  ...
  </div>
)

修正说明 #

1. 修复useEffect执行逻辑：将状态日志直接放在useEffect函数体内，返回的函数仅用于清理操作（无需清理可移除return），确保状态更新后能触发对应日志。
2. 函数式更新状态：通过setVal(prevVal => !prevVal)直接基于上一次状态值更新，避免闭包问题，同时简化逻辑。
3. JSX优化：onClick直接绑定changeVal即可，无需额外箭头函数；布尔值转字符串显示更直观。

验证效果 #

点击按钮后，控制台会依次打印：

• "Value is : true"（组件重渲染日志）
• "I pass on the effect with this value : true"（useEffect主逻辑日志）
  清理函数会在下次状态变化或组件卸载时执行，打印上一次的状态值。

内容的提问来源于stack exchange，提问作者marvik