React函数内声明的子组件不更新问题及解决方案咨询

你的核心问题在于把生成的组件数组存在了useState里——组件初始化时buildStepsFlow()只执行一次，捕获了当时的targetGroup值，后续父组件状态更新时，steps这个state不会自动重新生成，导致子组件拿到的始终是旧props。

最简便的解决方式是用useMemo替代useState来管理步骤数组：

import React from "react"

const TargetGroupStep = ({ targetGroup, setTargetGroup }) => (
    <div>
      <div>props = {targetGroup}</div>
      <button onClick={() => setTargetGroup("group1")}>Button 1</button>
      <button onClick={() => setTargetGroup("group2")}>Button 2</button>
    </div>
);

export default function App() {
  const [targetGroup, setTargetGroup] = React.useState("");

  const buildStepsFlow = () => [
    <TargetGroupStep targetGroup={targetGroup} setTargetGroup={setTargetGroup}/>,
  ];
  // 用useMemo替代useState，依赖targetGroup，状态变化时重新生成数组
  const steps = React.useMemo(() => buildStepsFlow(), [targetGroup]);

  return (
    <div className="App">
      <div>Parent state: {targetGroup}</div>
      {steps[0]}
      <br/>
      If declared:
      <TargetGroupStep targetGroup={targetGroup} setTargetGroup={setTargetGroup}/>
    </div>
  );
}

这样做的好处：

• 保留了对steps数组的访问权限，能随时获取步骤数量（比如steps.length）
• 不需要引入Context，避免额外复杂度，不影响后续单元测试
• 只有当targetGroup变化时才会重新生成步骤数组，避免不必要的渲染

如果buildStepsFlow的生成逻辑依赖其他状态或参数，只需要把这些依赖项添加到useMemo的依赖数组里即可。

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