从API提取数据时,React无法在移动浏览器上呈现视图

时间:2019-02-26 09:21:52

标签: javascript html reactjs

今天,当我通过手机访问位于同一网络(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;

您认为这里的问题是无法从手机上渲染我的Web应用程序?

0 个答案:

没有答案