同时更新两个状态导致组件无限循环——ReactJs结合Django后端场景

嘿，我来帮你搞定这个循环请求的麻烦！

问题根源 #

你当前的useEffect没有设置依赖数组，这意味着它会在组件的每一次渲染完成后都自动执行。而你在useEffect里调用了setUsername和setUserImage，这两个状态更新会触发组件重新渲染——重新渲染后又会再次执行useEffect、再次发起请求，如此无限循环，自然会导致后端收到大量重复请求，应用也跟着卡顿了。

解决方案 #

给useEffect添加合适的依赖数组就能解决这个问题。你的请求URL是基于props.loggedUser生成的，所以只有当loggedUser发生变化时，我们才需要重新发起请求获取用户信息。修改后的代码如下：

// 给初始状态设置默认值，避免渲染时出现undefined的异常
const [username, setUsername] = useState('');
const [userImage, setUserImage] = useState('');

useEffect(() => {
  // 把URL定义在useEffect内部，确保每次依赖变化时使用最新的loggedUser生成地址
  const url = `http://localhost:8000/users/${props.loggedUser}`;
  
  axios.get(url)
    .then((response) => {
      setUsername(response.data.username);
      setUserImage(response.data.profile_pic);
    })
    .catch(error => {
      // 添加错误处理，方便排查网络或后端接口问题
      console.error('获取用户信息失败:', error);
    });
}, [props.loggedUser]); // 依赖数组：只有当loggedUser变化时，才执行这个effect

额外小提示 #

• 如果把url定义在useEffect外部，也可以把url加入依赖数组，效果和依赖props.loggedUser是一致的。
• 给状态设置初始空字符串，能避免组件首次渲染时因为状态为undefined出现的UI异常。
• 加上catch块处理请求错误，可以帮你快速定位可能出现的网络问题或后端接口错误。

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