React回调函数无法读取外部Props值及触发无限循环问题求助

一、Temp函数无法读取API返回变量的原因 #

这是闭包捕获旧值导致的：

• 父组件首次渲染时，API请求还未完成，megaDataFromAPIresponse1是初始的null，此时Temp函数被创建，它会捕获当前作用域下的null值。
• 当API返回数据后，父组件会重新渲染，此时会生成一个新的Temp函数，这个新函数能读取到最新的megaDataFromAPIresponse1。但如果SpecialTable组件内部没有正确响应Accordion prop的更新（比如缓存了旧的Accordion实例、或是未将Accordion纳入依赖项导致相关逻辑未重新执行），它调用的仍然是首次渲染时创建的旧Temp函数，自然只能读到旧的null值。
• 而someStaticProp1是静态属性，初始就有固定值，不管哪个版本的Temp函数捕获的都是正确值，所以能正常打印。

二、设置状态触发无限循环的原因 #

这是因为状态更新会触发渲染，而渲染又会再次触发状态更新，形成闭环：

• 当Temp函数被调用时设置状态，会触发父组件重新渲染。
• 父组件重新渲染时，会重新创建Temp函数并传递给SpecialTable。如果SpecialTable在接收到新的Accordion prop时，会再次调用这个新的Temp函数，就会再次执行状态设置操作，进而再次触发父组件渲染，无限循环。
• 另外，如果你的useEffect依赖项中包含了每次渲染都会重新生成的变量（比如未用useCallback包裹的Temp函数本身），useEffect会在每次渲染时都执行，执行过程中又设置状态，也会导致循环。

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