结合ContextAPI、useState、useEffect开发遇数据传递、死循环及重渲染问题

异步数据未传递到组件/无限循环问题 #

• Context 中定义的fetchRandomNames方法未返回异步请求的Promise对象，你仅在Context内部完成了请求逻辑，没有把Promise链暴露给调用方，导致Home组件中调用该方法时无法通过.then拿到响应结果，自然无法设置本地state触发渲染。修复方案是给fetchRandomNames方法的请求逻辑前加return，将整个请求Promise返回。
• 无限循环的原因是你将本地statenames加入了useEffect的依赖数组：每次请求成功更新names后，都会触发useEffect重新执行，进而发起新的请求、再次更新names，形成死循环。该场景下useEffect的依赖数组应为空数组[]，代表仅在组件首次挂载时执行一次请求逻辑。
• 监听state setter函数不生效属于正常情况：React的state setter函数引用是稳定的，不会随渲染发生变化，加入依赖数组也不会触发useEffect重新执行，该方案本身和你遇到的问题无关。
• 额外优化建议：你不需要在Home组件中单独维护一份names本地state，直接消费Context中存储的names渲染即可，多余的状态同步逻辑反而容易引发bug。

Context 异常重渲染问题原因 #

Context的触发规则是：只要Context的value属性引用发生变化，所有消费该Context的组件都会强制重渲染。你当前的实现中，每次父组件重渲染都会重新生成一个全新的value对象，哪怕对象内部的属性值没有变化，新的对象引用也会触发所有消费组件重渲染，才会出现控制台日志远超预期的情况。
优化方案如下：

• 用useCallback包裹fetchRandomNames方法，保证方法引用的稳定性，避免不必要的value变化
• 用useMemo缓存Context的value对象，仅当names或者fetchRandomNames发生变化时才生成新的value对象，减少不必要的重渲染触发。

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