[BUG] 从后端API接口获取列表数据，导致无限循环请求

[xiaoxpai]

AllMeetupsPage

import MeetupList from "../components/meetups/MeetupList";
import {useState} from "react";

/**
 *   发送请求获取数据
 *  1. 使用fetch发送请求，URL地址： http://10.151.110.52:8080/getMeets
 * @returns {JSX.Element}
 * @constructor
 */
function AllMeetupsPage() {

    //是否加载到数据的状态
    const [isLoading,setIsLoading] = useState(true);
    //正在获取数据的状态
    const [loadedMeetups,setLoadedMeetups] = useState([]);

    fetch(
        'http://localhost:8080/getMeets',
        {
            header:{
                'Access-Control-Allow-Origin':'*'
            }
        }

    ).then(response=>{

        return  response.json();
    }).then(data=>{

        setIsLoading(false);//拿到数据了，就不需要叠加层遮罩或加载器了
        setLoadedMeetups(data)
    });

    //在组件返回之前，判定是否已加载数据，如果正在加载，返回这段JSX组件代码
    if (isLoading){
        return <section>
            <p>Loading ...</p>
        </section>
    }

    return (
        <section>
            <h1>All Meetups Page</h1>
           <MeetupList meetups={loadedMeetups}/>
        </section>
    )
}

export default AllMeetupsPage;

[xiaoxpai]

try-fix-1😄

解决方案：通过加载和数据状态获取数据，不会导致无限循环

解决了无线循环请求问题，但是还存在一个问题，当发送请求后端API接口的数据时数组类型会报错，所以还需进一步改善

function AllMeetupsPage() {

    //是否加载到数据的状态
    const [isLoading, setIsLoading] = useState(true);
    //正在获取数据的状态
    const [loadedMeetups, setLoadedMeetups] = useState([]);

    //1.使用fetch发送请求
    useEffect(() => {
        //每当副作用影响再次运行时，再次设置为true
        setIsLoading(true)
        fetch(
            'http://localhost:8080/getMeets',
            {
                header: {
                    'Access-Control-Allow-Origin': '*'
                }
            }
        ).then(response => {
            //返回一个promise对象,它解析实际的响应对象
            return response.json();
        }).then(data => {
             setIsLoading(false); 
            setLoadedMeetups(data) //!!!!!!!!!!!!!!!!! 如果是数组格式的数据，那么会报错，待改善
        });
    }, []);

    //在组件返回之前，判定是否已加载数据，如果正在加载，返回这段JSX组件代码
    if (isLoading) {
        return <section>
            <p>Loading ...</p>
        </section>
    }

    return (
        <section>
            <h1>All Meetups Page</h1>
            <MeetupList meetups={loadedMeetups}/>
        </section>
    )
}

[xiaoxpai]

对数据进行处理，即可 so,该issue可以关闭了

 useEffect(() => {
        //每当副作用影响再次运行时，再次设置为true
        setIsLoading(true)
        fetch(
            'http://localhost:8080/getMeets',
            {
                header: {
                    'Access-Control-Allow-Origin': '*'
                }
            }
        ).then(response => { 
            return response.json();
        }).then(data => {
            const meetups=[];
            for (const key in data){
                const meetup = {
                    id:key,
                    ...data[key]
                }
                meetups.push(meetup);
            }

             setIsLoading(false);//拿到数据了，就不需要叠加层遮罩或加载器了
            setLoadedMeetups(meetups)
            console.log(meetups)
        });
    }, []);