React组件动态元素状态不更新问题求助

问题根源 #

你当前的问题出在把JSX元素直接存在state中。当props.something变化时，useEffect会生成新的JSX并赋值给state1，此时的JSX会捕获当时checked的闭包值。后续点击复选框更新checked时，state1里的JSX并不会重新渲染——它是之前生成的静态快照，无法响应checked的状态变化，所以页面上的状态显示始终不会更新。

正确解决方案（推荐）：直接在渲染阶段做条件渲染 #

React的设计思路是状态驱动视图，应避免将JSX存入state，而是直接在return中根据状态/ props做条件判断：

const Child = (props) => {
  const [checked, setChecked] = useState(false);

  // 可选：请求重新发起时重置复选框状态，匹配业务场景
  useEffect(() => {
    if (props.something === 1) {
      setChecked(false);
    }
  }, [props.something]);

  return (
    <>
      {props.something === 1 ? (
        <div>something is 1!</div>
      ) : (
        <div>
          <input
            type="checkbox"
            name="checkbox1"
            onChange={() => setChecked(prev => !prev)}
            checked={checked} // 改用受控组件，让state完全控制复选框状态
          />
          State is {checked ? "TRUE" : "FALSE"}
        </div>
      )}
    </>
  );
};

关键优化点：

1. 移除存储JSX的state1，直接在渲染时根据props.something分支渲染，确保每次checked或props变化时，视图都会同步更新。
2. 将复选框改为受控组件：用checked={checked}替代defaultChecked，让React state完全控制复选框的选中状态，避免非受控组件的状态不一致问题。
3. 可选的useEffect：在请求重新发起（props.something变回1）时重置复选框状态，符合“每次请求完成后展示新数据，复选框默认未选中”的业务逻辑。

不推荐的备选方案（若坚持存JSX到state） #

如果因特殊场景需要将JSX存入state，需让state1响应checked的变化，额外添加依赖checked的useEffect：

const Child = (props) => {
  const [checked, setChecked] = useState(false);
  const [state1, setState1] = useState(<></>);

  useEffect(() => {
    if (props.something === 1) {
      setState1(<div>something is 1!</div>);
    }
  }, [props.something]);

  // 当checked变化时，重新生成复选框JSX
  useEffect(() => {
    if (props.something !== 1) {
      setState1(
        <div>
          <input
            type="checkbox"
            name="checkbox1"
            onChange={() => setChecked(prev => !prev)}
            checked={checked}
          />
          State is {checked ? "TRUE" : "FALSE"}
        </div>
      );
    }
  }, [props.something, checked]);

  return <>{state1}</>;
};

这种写法会增加组件复杂度，不符合React的设计理念，仅作为特殊场景的临时解决方案。

内容的提问来源于stack exchange，提问作者J.Green