尝试连接到组件时 React 挂起

Question

出于某种原因，当尝试连接此组件时，反应只是挂起而没有给出任何错误：

import React, { useState, useEffect } from 'react';
import { useHttp } from '../../hooks/http.hooks';

import _ from 'lodash';

import profileImg from '../../img/system/profile/profileImg.svg';

function ProfileLink() {
    const { request } = useHttp(); // To get data
    const [profile, setProfile] = useState({});

    const profileID = JSON.parse(localStorage.getItem('user')).id;

    function takeProfileLink() {
        const userID = JSON.parse(localStorage.getItem('user')).id;
        setProfile({
            ...profile,
            link: `profile/${userID}`
        });
    }

    async function takeProfile() {
        const data = await request(`http://localhost:5500/api/auth/get/${profileID}`);
        setProfile({
            ...profile,
            picture: _.get(data, 'profile.picture', 'https://i.pinimg.com/originals/0c/3b/3a/0c3b3adb1a7530892e55ef36d3be6cb8.png'),
            name: _.get(data, 'profile.name', '')
        });
    }

    async function takeProfilePicture() {
        if (profile.picture) {
            return `http://localhost:5500/api/upload/image_get/${profile.picture}`;
        } else {
            return profileImg;
        }
    }

    async function standProfilePicture() {
        const link = await takeProfilePicture();
        setProfile({
            ...profile,
            pictureLink: link
        });
    }

    useEffect(async() => {
        await takeProfile();
        takeProfileLink();
    }, []);
    
    standProfilePicture();

    return (
        <a href={profile.link} className="profile-link">
            <div className="profile-name">
                {profile.name}
            </div>
            <div className="profile-picture">
                <img src={profile.pictureLink} alt="profile picture"/>
            </div>
        </a>
    );
}

export default ProfileLink;

推测问题出在 profile 对象上。以前，一切都打包在变量中，一切正常，但现在我用一个对象替换了变量，反应只是停止加载。

Answer 1

尝试将调用移至 useEffect 挂钩内的 standProfilePicture()。悬空函数调用可能会导致组件无限期地重新呈现，从而冻结页面。

尝试连接到组件时 React 挂起

React hangs when trying to connect to component

javascript

lodash

reactjs