React函数式组件中无法从子元素更新状态的问题排查

问题原因 #

你把child元素存在currentPage状态里，且通过空依赖的useEffect仅初始化一次。这导致该child是组件首次渲染时生成的，它的onClick回调捕获的是当时的advancedMode初始值（false）和对应版本的setAdvancedMode。

当父组件通过自身按钮更新advancedMode后，组件会重新渲染，但currentPage仍保留着旧的child——这个旧child里的advancedMode永远是首次渲染的false。所以点击子组件按钮时，只会执行setAdvancedMode(!false)将状态改为true，后续再点击时，还是基于旧的false计算，结果还是true，状态无变化，自然不会触发组件更新，看起来就像失效了。

解决办法 #

方法1：直接在render中渲染子元素（最推荐） #

没必要把React元素存进状态，直接在返回的JSX里渲染child即可。这样每次组件渲染都会生成新的child，捕获最新的advancedMode和setAdvancedMode：

import React, { useState } from "react";

export default function RegistrationPopup() {
  const [advancedMode, setAdvancedMode] = useState(false);

  const child = (
    <div>
      <button
        onClick={() => {
          setAdvancedMode(!advancedMode);
        }}
      >
        set advanced mode child
      </button>
    </div>
  );

  return (
    <div>
      {"mode is: " + (advancedMode ? "advanced" : "normal")}
      <br />

      <button
        onClick={() => {
          setAdvancedMode(!advancedMode);
        }}
      >
        set advanced mode parent
      </button>

      {child}
    </div>
  );
}

方法2：使用函数式更新（适合必须存元素到状态的场景） #

如果因业务需求必须把child存在状态里，可改用函数式更新，这样无论闭包里的advancedMode是旧值还是新值，都会基于上一次的真实状态计算新值：

import React, { useEffect, useState } from "react";

export default function RegistrationPopup() {
  const [advancedMode, setAdvancedMode] = useState(false);
  const [currentPage, setCurrentPage] = useState(null);

  const child = (
    <div>
      <button
        onClick={() => {
          setAdvancedMode(prevMode => !prevMode);
        }}
      >
        set advanced mode child
      </button>
    </div>
  );

  useEffect(() => {
    setCurrentPage(child);
  }, []);

  return (
    <div>
      {"mode is: " + (advancedMode ? "advanced" : "normal")}
      <br />

      <button
        onClick={() => {
          setAdvancedMode(!advancedMode);
        }}
      >
        set advanced mode parent
      </button>

      {currentPage}
    </div>
  );
}

方法3：更新useEffect的依赖（不推荐，但能解决问题） #

让useEffect在advancedMode变化时重新设置currentPage，这样child会重新创建并捕获最新状态：

import React, { useEffect, useState } from "react";

export default function RegistrationPopup() {
  const [advancedMode, setAdvancedMode] = useState(false);
  const [currentPage, setCurrentPage] = useState(null);

  const child = (
    <div>
      <button
        onClick={() => {
          setAdvancedMode(!advancedMode);
        }}
      >
        set advanced mode child
      </button>
    </div>
  );

  useEffect(() => {
    setCurrentPage(child);
  }, [advancedMode]);

  return (
    <div>
      {"mode is: " + (advancedMode ? "advanced" : "normal")}
      <br />

      <button
        onClick={() => {
          setAdvancedMode(!advancedMode);
        }}
      >
        set advanced mode parent
      </button>

      {currentPage}
    </div>
  );
}

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