React not rendering the view on mobile browser when fetching data from API

问题

I noticed something strange today when I accessed my localhost from my mobile phone that are both on same network (wifi).

The thing is the page is not being rendered on my phone and the page shows blank, while it works pretty fine on my computer.

Here is the code:

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;

What do you think would be the issue here that my web app is not being rendered from my phone?

来源：https://stackoverflow.com/questions/54882104/react-not-rendering-the-view-on-mobile-browser-when-fetching-data-from-api