React中API调用无限重渲染与数据为空问题求解

问题根源 #

1. 页面刷新返回空数组：useEffect依赖为空数组时，仅在组件挂载时执行一次。此时taskdetails可能还未获取到后端数据，assignedid是空数组，导致没有发起图片请求，userimage保持初始空状态。
2. 添加依赖后无限重渲染：直接把assignedid加入依赖时，由于每次组件渲染都会通过map生成新的数组对象（引用地址不同），React会判定依赖变化，反复触发useEffect，造成无限重渲染。

可行方案 #

方案一：用useMemo缓存assignedid

通过useMemo缓存assignedid，仅在taskdetails变化时重新生成数组，避免每次渲染产生新引用。同时将缓存后的assignedid作为useEffect的依赖。

const [userimage, setUserimage] = React.useState<TaskImage[]>([])

// 用useMemo缓存assignedid，过滤无效id
const assignedid = React.useMemo(() => {
  return taskdetails.map(item => item?.assigned_id).filter(Boolean);
}, [taskdetails]);

useEffect(() => {
  const fetchData = async () => {
    // 无有效id时直接重置状态
    if (assignedid.length === 0) {
      setUserimage([]);
      return;
    }
    
    try {
      const imagePromises = assignedid.map(async element => {
        const response = await fetch(`http://localhost:8080/api/download/${element}`, {
          headers: {
            Authorization: `Bearer ${localStorage.getItem('accesstoken')}`
          }
        });
        const data = await response.json();
        return {
          userid: element,
          image: data.encodedBase64String
        };
      });
      
      const taskImages = await Promise.all(imagePromises);
      setUserimage(taskImages);
    } catch (error) {
      console.error('获取用户图片失败:', error);
      setUserimage([]);
    }
  };

  fetchData();
}, [assignedid]);

方案二：在useEffect内部生成assignedid

直接在useEffect函数内生成assignedid，将taskdetails作为依赖。这样既保证taskdetails变化时触发请求，又不会因为数组引用变化导致无效触发。

const [userimage, setUserimage] = React.useState<TaskImage[]>([])

useEffect(() => {
  const fetchData = async () => {
    const assignedid = taskdetails.map(item => item?.assigned_id).filter(Boolean);
    
    if (assignedid.length === 0) {
      setUserimage([]);
      return;
    }
    
    try {
      const imagePromises = assignedid.map(async element => {
        const response = await fetch(`http://localhost:8080/api/download/${element}`, {
          headers: {
            Authorization: `Bearer ${localStorage.getItem('accesstoken')}`
          }
        });
        const data = await response.json();
        return {
          userid: element,
          image: data.encodedBase64String
        };
      });
      
      const taskImages = await Promise.all(imagePromises);
      setUserimage(taskImages);
    } catch (error) {
      console.error('获取用户图片失败:', error);
      setUserimage([]);
    }
  };

  fetchData();
}, [taskdetails]);

额外优化点 #

• 加入filter(Boolean)过滤掉null/undefined的assigned_id，避免发起无效请求；
• 增加空数组判断，减少不必要的网络请求；
• 异常捕获后重置userimage状态，避免旧数据残留。

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