我的组件只在笔记本电脑和台式机上呈现，在手机上不呈现

Question

first of all I would like to say thank you in advance to everyone who invest their time to help me figure this out.

I'm currently building an app and everything is rendering just as fine, except for one component; in this component I'm using Axios to make a GET request to my server. everything is working correctly on the backend, my server responds with the requested information in Json format, and the component that made the request is successfully receiving the requested data.

now here's where my problem comes in, after I've retrieved that data I want to loop through it (because it's an Array) with the.map() function and return a component with the mapped out data; I've written the code to do this already and when I visit the app on a laptop or desktop device the component renders perfectly, just as I expected it to, but when I visit the app on a mobile device the component does not render. the component gets stuck on the loading status and never actually renders the component.

what makes this more difficult to resolve is that the fact that I'm not getting any error messages from the app, not from the server side nor from google chrome's devTools. so I don't know how to approach this and resolve this issue. so, my question is, how do I get the component to render on all devices including mobile phones and iPads, not just laptops and desktops?

here are my codes for the component:

const [productData, setProductData] = useState([]);

    useEffect(() => {
        window.addEventListener("resize", screenSize);
        assetStatusHandler();
        const url = "http://my-web-address.com/api/guest/promotional-products/real-estate";
        axios
            .get(url)
            .then((res) => {                
                // console.log(res);
                console.log(res.data);
                setProductData(res.data);
            })
            .catch((err) => {               
                console.error(err);
            });
        return () => {
            window.addEventListener("resize", screenSize);
        };
    }, []);

const dynamicComponents = (data) => {
    if (data.length <= 0) {
        return (
            <div className="page-section__loader_container">
                <Spinner className="page-section__loading-status" animation="border" role="status">
                    <span className="visually-hidden">Loading...</span>
                </Spinner>
                    <h1>loading ...</h1>
            </div>
            );
        } else {
            const products = productData.map((property, i) => {
                return <RevolvingCard key={i} image={`${firstProperty} 640w, ${firstPropertyMedium} 1000w, ${firstPropertyLarge} 1500w`} overlay={i % 2 ? "Deal Available" : "Deal Sold"} text={"property.Info"} button={revolvingCardHandler} backButton1={acquireDealHandler} backButton2={cancelDealHandler} title={`${property.address.formatted_street_address}, ${property.address.city}, ${property.address.state}, ${property.address.zip_code}`} />;
            });
            return products;
        }
    };

return (
        <div className="page-section wrapper" id="real-estate">
            <h1 className="page-section__section-title">real estate market</h1>
            <div className="page-section__display-container">{dynamicComponents(productData)}</div>
            {activateOverlay && <div className="page-section__large-screen-overlay"></div>}
        </div>
    );

Answer 1

This could be an issue of not having open permissions to access the server from your mobile device. If you're trying to access a server that is only serving data within the LAN, your phone may just be accessing it from outside the LAN. Try turning off mobile data and connecting to your wifi on your phone.