React子组件未检测到状态变更问题咨询

核心问题在于两种渲染方式的本质差异：

• 通过{testComponent}渲染的子组件，其props是初始挂载时的固定值，不会随父组件dataOnParent的更新同步；而直接声明<TestComponent dataOnParent={dataOnParent} id={2} />的方式，会在父组件每次重渲染时传递最新的props。

具体拆解 #

1. 状态存储组件元素的局限性
   你在父组件的空依赖useEffect中仅执行了一次settestComponent，此时dataOnParent的初始值为1，对应的<TestComponent>元素被存入状态后，除非主动调用settestComponent更新，否则它的props会一直停留在dataOnParent=1，不会随父组件后续的dataOnParent变化而更新，自然不会触发子组件依赖dataOnParent的useEffect。

2. 直接渲染组件的工作逻辑
   当直接在JSX中声明<TestComponent dataOnParent={dataOnParent} id={2} />时，父组件每一次重渲染（比如dataOnParent变更触发）都会重新生成这个组件元素，将最新的dataOnParent值作为props传入。子组件接收到新的props后，会触发依赖dataOnParent的useEffect执行。

额外修正点 #

你的TestComponent参数写法不符合React组件规范，组件的props是一个单一对象，需要改为解构形式才能正确接收参数：

export default function TestComponent({ dataOnParent, id }) {
    React.useEffect(() => {
        console.log(id, dataOnParent);
    }, [dataOnParent]);

    return (<></>);
}

原写法中dataOnParent实际接收的是整个props对象，id会是undefined，也会导致日志输出不符合预期。

修复方案 #

如果一定要用状态存储组件的方式，需要将dataOnParent加入依赖，在其变化时重新生成组件：

React.useEffect(() => {
    settestComponent(<TestComponent
        dataOnParent={dataOnParent}
        id={1} 
    />);
}, [dataOnParent]);

不过更推荐直接在JSX中声明组件的常规写法，代码简洁且不易出现此类状态不同步问题。

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