Javascript 从API获取数据时不在移动浏览器上呈现视图

今天，当我从同一网络（wifi）上的手机访问本地主机时，我注意到了一些奇怪的事情

问题是，我的手机上没有显示页面，页面显示为空白，而我的电脑上的页面工作得很好

代码如下：

import React, {Component} from 'react';
import './assets/css/bootstrap.min.css';
// import './assets/js/bootstrap.min';
import { Timeline, Tweet} from 'react-twitter-widgets'
import config from './config';

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            mainImage: {
                url: null,
                caption: null
            },
            uuid: null,
            title: null,
            author: {
                name: null,
                email: null,
                image: null
            },
            tags: [],
            premium: null,
            preamble: null,
            body: [],
            publishingTime: null
        };
    }

    componentDidMount() {
        this.fetchArticle();
    }

    fetchArticle() {
        fetch(config.apiUrl + "article/f3028496-d1e6-42cb-b39a-8e9593d5a05a")
            .then(response => response.json())
            .then(data => {
                console.log(data)
                this.setState({
                    mainImage: data.mainImage,
                    uuid: data.uuid,
                    title: data.title,
                    author: data.author,
                    tags: data.tags,
                    premium: data.premium,
                    preamble: data.preamble,
                    body: data.body,
                    publishingTime: data.publishingTime,
                });
            })
            .catch(error => {
                console.log(error);
            });
    };

    conditionalRendering(block, key) {
        let blockType = Object.keys(block)[0].toLowerCase() || null;
        if (blockType != null) {
            if (blockType === 'paragraph') {
                return this.renderParagraph(block, key);
            } else if (blockType === 'headline') {
                return this.renderHeadline(block, key);
            } else if (blockType === 'image') {
                return this.renderImage(block, key);
            }
        } else {
            console.log("Block type null")
        }
    }

    renderParagraph(block, key) {
        return (
            <p key={key}>{block.paragraph}</p>
        );
    }

    renderHeadline(block, key) {
        return (
            <h4 key={key}>{block.headline}</h4>
        );
    }

    renderImage(block, key) {
        return (
            <div key={key}>
                <img width="100%" src={block.image.url} alt=""/>
                <p><i>{block.image.caption}</i></p>
            </div>

        );
    }

    renderTwitterEmbeds(twitterId) {
        return (
            <Tweet
                tweetId={twitterId}
            />
        );
    }

    render() {
        return (
            <div className="App">
                <div className={"container-fluid article"}>
                    <div className={"row header header"}>
                        <img width="100%" height={"260px"}
                             src={this.state.mainImage.url}
                             alt=""/>
                        {/*<p><i>{this.state.mainImage.caption}</i></p>*/}
                    </div>
                    <div className={"row"}>
                        <div className={"col-sm-12 content text-left mt-2"}>
                            <h4>{this.state.title}</h4>
                            <p>{this.state.author.name} | {this.state.publishingTime}</p>
                            <p className={"preamble mt-3"}>{this.state.preamble}</p>
                            {
                                this.state.body.map((block, key) => {
                                    return this.conditionalRendering(block, key)
                                })
                            }
                        </div>
                    </div>

                    <div className={"row"}>
                        <div className={"col-sm-12 content text-left mt-2"}>
                            {
                                this.renderTwitterEmbeds("1099398639942856705")
                            }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

import React，{Component}来自'React'；
导入“./assets/css/bootstrap.min.css”；
//导入“./assets/js/bootstrap.min”；
从“react twitter widgets”导入{Timeline，Tweet}
从“/config”导入配置；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
主要图像：{
url:null，
标题：空
},
uuid:null，
标题：空，
作者：{
名称：空，
电子邮件：空，
图像：空
},
标签：[]，
溢价：空，
序言：无效，
正文：[]，
发布时间：空
};
}
componentDidMount（）{
this.fetchArticle（）；
}
fetchArticle（）{
获取（config.apirl+“article/f3028496-d1e6-42cb-b39a-8e9593d5a05a”）
.then（response=>response.json（））
。然后（数据=>{
console.log（数据）
这是我的国家({
mainImage:data.mainImage，
uuid:data.uuid，
标题：data.title，
作者：data.author，
标签：data.tags，
溢价：data.premium，
序言：数据。序言，
body:data.body，
publishingTime:data.publishingTime，
});
})
.catch（错误=>{
console.log（错误）；
});
};
条件呈现（块、键）{
让blockType=Object.keys（block）[0].toLowerCase（）| | null；
if（块类型！=null）{
如果（块类型==='段落'）{
返回此.renderParagraph（块，键）；
}else if（blockType=='headline'）{
返回此.renderhadline（块，键）；
}else if（blockType==='image'）{
返回此.renderImage（块，键）；
}
}否则{
console.log（“块类型null”）
}
}
renderParagraph（块、键）{
返回(
{block.paration}
);
}
渲染基线（块、键）{
返回(
{block.headline}
);
}
渲染（块、键）{
返回(
{block.image.caption}

);
}
renderTwitterEmbeds（twitterId）{
返回(
);
}
render（）{
返回(
{/*{this.state.mainImage.caption}
*/}
{this.state.title}
{this.state.author.name}{this.state.publishingTime}

{this.state.preamble}
{
this.state.body.map（（块，键）=>{
返回此。条件呈现（块、键）
})
}
{
此.renderTwitterEmbeds（“1099398639942856705”）
}
);
}
}
导出默认应用程序；

---

你认为我的网络应用没有从手机上呈现会是什么问题

您的网络中是否有另一台计算机可以执行相同的请求？可能更像是一个关于网站如何服务的问题，但至少从另一台计算机进行测试将允许您查看调试器以查看发生的情况。幸运的是，我没有任何其他设备：但我的意思是js代码按照我的视图看起来很好。也可以尝试先删除所有逻辑，然后只呈现静态“hello”，如果无法呈现，则更可能是一个infra问题。如果它显示，则下一个最佳猜测是获取是如何发生的（如果congif.apiUrl应设置为ip而不是类似的本地主机），还可以显示一个图像，其中在第一次呈现时，数据def将为null

this.state.mainImage.url

（不应破坏任何重大事件，但没有帮助）@Quince如果我更改任何状态并添加一些静态字符串，它在移动设备上可以正常工作。您的网络中是否有其他计算机可以执行相同的请求？可能更像是站点如何服务的一个基本问题，但至少从另一台计算机进行测试将允许您查看调试器以查看发生了什么告诉我我没有任何其他设备：但是我的意思是js代码按照我的视图看起来很好。你也可以尝试先删除所有逻辑，然后只是呈现一个静态的“hello”，如果不能呈现，那么这很可能是一个infra问题。如果它显示了，那么下一个最佳猜测是如何进行提取（如果congif.apiUrl应该设置为ip而不是像这样的本地主机），还可以显示一个图像，其中在第一次渲染时，数据def将为null

this.state.mainImage.url

（不应该破坏任何主要功能，但没有帮助）@Quince如果我更改任何状态并添加一些静态字符串，它在移动设备上可以正常工作。