React传递Promise作为Prop引发组件无限重渲染的解决方法

核心解法 #

别把Promise调用直接写在组件顶层，每次渲染都会重新执行它，setJudete又触发重渲染，直接陷入死循环。正确做法是把Promise放到useEffect钩子中，通过控制依赖项，让它只在需要的时候执行。

具体实现 #

• 仅挂载时执行一次
  把获取数据的逻辑塞进useEffect，依赖项数组留空，这样组件只有首次挂载时会跑这个Promise：

  import { useState, useEffect } from 'react';
  
  function YourComponent() {
    const [judete, setJudete] = useState([]);
  
    useEffect(() => {
      // 替换成你的实际Promise调用
      yourLibraryFetchPromise()
        .then(data => {
          setJudete(data);
        })
        .catch(err => {
          // 记得加错误处理，不然出问题找不到原因
          console.error('获取数据失败:', err);
        });
    }, []); // 空数组=只在组件挂载时执行一次
  
    // 剩下的渲染逻辑
    return (
      <div>
        {/* 用judete数据渲染内容 */}
      </div>
    );
  }
  

• 按需重新执行
  要是后续需要根据某个参数变化重新拉数据，就把这个参数加到useEffect的依赖数组里，只有参数变了才会重新跑Promise：

  useEffect(() => {
    yourLibraryFetchPromise(someKeyParam)
      .then(data => setJudete(data))
      .catch(err => console.error('获取数据失败:', err));
  }, [someKeyParam]); // someKeyParam变化时重新执行
  

• 避免内存泄漏（可选）
  如果组件可能在Promise还没返回就卸载（比如用户快速跳转页面），可以加个标记，避免卸载后还调用setJudete：

  useEffect(() => {
    let isComponentMounted = true;
  
    yourLibraryFetchPromise()
      .then(data => {
        if (isComponentMounted) {
          setJudete(data);
        }
      })
      .catch(err => {
        if (isComponentMounted) {
          console.error('获取数据失败:', err);
        }
      });
  
    // 组件卸载时执行这个清理函数
    return () => {
      isComponentMounted = false;
    };
  }, []);
  

为啥这招管用？ #

React组件每次重渲染时，顶层的所有代码都会重新执行一遍。你之前把Promise放顶层，等于每次渲染都发起新请求，setJudete又触发重渲染，循环就这么来的。而useEffect的依赖数组能精准控制执行时机，空数组就只跑一次，完美打破循环。

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