我的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

这是因为您正在使用localhost地址获取数据IE http://127.0.0.1:8000/。
后端在您的PC/笔记本电脑上运行，因此它可以在此处工作，但在移动设备上却不能。为了使其在移动设备上可见，请使用您的LAN地址而不是Localhost。
在Windows OS上，您可以打开CMD并通过此命令检查：
IP配置
在MacOS上，您可以启动终端并检查：
ifconfig

它将像：192.168.1.12（只是一个示例）。

因此，在您的使用效果挂钩中，您可以使用：

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

那么您也可以在移动设备上查看数据。