跨组件调用时React useState布尔值更新失效问题求助

问题场景 #

在Component1中通过子组件Component2的方法调用，尝试更新布尔类型的useState变量show，但变量始终无法更新。已确认Component2的方法已成功触发并执行到Component1的locate函数，但show始终为false。

代码中的明显错误 #

先看你提供的代码里的语法问题：

1. 变量声明拼写错误：Component2中cosnt是const的拼写错误，会直接导致语法报错。
2. 函数重定义覆盖props：Component2内部重新定义了handle函数，覆盖了从props传入的handle，且内部函数里调用的locate()未定义，这会导致实际执行的不是你期望的Component1的方法。正确写法应该是直接使用props传入的handle，或者内部函数调用props.handle()。

修正后的Component2基础代码示例：

function Component2(props) {
  const { handle } = props;
  
  function triggerHandle() {
    handle();
  }

  return (
    <button onClick={triggerHandle}>调用handle</button>
  );
}

export default Component2;

闭包导致的状态更新失效 #

即使修正了上述语法问题，仍可能出现show不更新的情况，这是闭包捕获旧状态值导致的：
在Component1的locate函数中，你使用setShow(!show)，这里的show是函数创建时捕获的闭包值。如果Component1未重新渲染，或者locate函数基于旧的渲染周期创建，它会一直使用最初的false值，导致每次调用都是基于旧值切换，看起来状态没有变化。

解决方法 #

使用useState的函数式更新语法，让React基于最新的状态值进行更新：

function Component1(props) {
  const [show, setShow] = useState(false);

  function locate() {
    // 函数式更新，接收最新状态值作为参数
    setShow(prevShow => !prevShow);
  }

  return (
    <div>
      <Component2 handle={locate} />
      <p>当前show值：{show.toString()}</p>
    </div>
  );
}

export default Component1;

函数式更新会确保每次更新都基于React内部维护的最新状态值，而非闭包捕获的旧值，这样就能正确切换show的布尔状态。

总结 #

1. 先修正代码中的语法错误，避免函数重定义覆盖props的问题；
2. 使用useState的函数式更新语法，解决闭包导致的旧状态值捕获问题。

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