我的React不会在移动设备上渲染来自我的API的数据，而是在PC上渲染，

Question

我正在开发这个项目，该项目从我的 Restful api 获取数据并使用它来更新状态。它在 PC/笔记本电脑上完美运行，但是当我在移动设备上访问它时，它不会显示 api 中的任何内容，它只显示页面和静态文件， 在下面的代码中，我使用地图从后状态创建元素

有解决办法还是我做错了

import '../css/pages/Home.css';
import {Link} from "react-router-dom";
import {useEffect, useState} from "react";
import Posts from "../components/Posts";

export const Home = () => {
    const [posts, setPosts] = useState([])


    async function fetch_post(link) {
        const res = await fetch(link)
        const data = await res.json()
        setPosts([...data]);

    }

    useEffect(() => {
        fetch_post("http://127.0.0.1:8000/")
    }, [])
    return (
        <>
            <section className={'intro'}>
                <div className={'intro-con'}>
                    <h1 className="intro-header">Welcome here</h1>
                    <p className="intro-msg">

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut
                        culpa cum distinctio excepturi, fuga hic id praesentium reiciendis similique veniam voluptate
                        voluptates? Accusamus ad aliquam consequuntur cupiditate dolor, dolorem dolores earum eius
                        eligendi fuga illum ipsam molestiae, nulla omnis, praesentium quae quia quibusdam repellat totam
                        voluptate? Ex, molestias, voluptatem?</p>
                    <Link to={'about/'} className={'btn'} style={{width: "max-content"}}>Learn More</Link>
                </div>
            </section>
            <section className="posts-feed contain">

                {posts.map(post => {
                    return (
                        <Posts post={post}/>
                    );
                })}

            </section>
        </>

    )}

Answer 1

这是因为您正在使用本地主机地址来获取数据，即

http://127.0.0.1:8000/

。 后端在您的电脑/笔记本电脑上运行，因此它可以在那里工作，但不能在移动设备上运行。要使其在移动设备上可见，请使用您的 LAN 地址而不是本地主机。 在Windows操作系统上，您可以打开cmd并通过以下命令进行检查：

ip config

在 MacOS 上，您可以启动终端并通过以下方式进行检查：

ifconfig

它会是这样的：

192.168.1.12

（只是一个例子）。

因此，在 useEffect 挂钩中，您可以使用：

useEffect(() => {
        fetch_post("http://192.168.1.12:8000/")
    }, [])

然后您也可以在移动设备上查看您的数据。

Answer 2

我只在一个 React 项目前端工作，在从 API 获取数据时面临同样的问题，它在笔记本电脑上工作，但在移动设备上不起作用