Question

我已经创建了一个小型的ReactJS应用，并从facebook api中获取了用户提要数据。

如果未显示数据，请调用NodeJS api并从Facebook获取提要，然后重定向回索引屏幕。问题是一旦重定向回，我发现提要已经在数据库中，并且重定向回索引页面后，提要没有显示，我需要重新加载浏览器屏幕。

我的问题是在反应中重定向回原始屏幕后应该使用哪个组件？

import React, { Component } from 'react';
import ReloadButton from './ReloadButton';
import Feeds from './Feeds';
import Alert from './Alert';

class MyTest extends Component {

    constructor(props) {
        super(props);
        this.state = {
            feeds: []
        };
    }

    componentDidMount() {
        fetch('/fetch')
            .then(response => response.json())
            .then(data => this.setState({ feeds: data }));
    }

    render() {
        const { feeds } = this.state;
        return (
            <div className="container-fluid">
                <a className="btn btn-primary" href="/auth/facebook">Reload</a>
                { feeds.length > 0 ? <Feeds feeds={ feeds } /> : <Alert /> }
            </div>
        );
    }
}

export default MyTest;

Answer 1

如果我是你，我做了类似的事情。请说是否有帮助

interface ExampleProps {
    someDataFacebookSendMe: any; //this prop used to get redirect from facebook and for first time is null
}

interface ExampleState {
    feeds: []
    spinning: boolean;
    isDataCollected: boolean; // this proprty check for gotten data
}
export class Example extends React.Component<ExampleProps, ExampleState> {
    constructor(props) {
        super(props);
        this.state = {
            feeds: [],
            spinning: true,
            isDataCollected: false
        };
    }

    componentDidMount() {
        if (!!this.props.someDataFacebookSendMe) {

            while (!this.state.isDataCollected) {
                this.getData()
            }

            fetch('/fetch')
                .then(response => response.json())
                .then(data => {
                    if (data !== null && data !== undefined) {

                        this.setState({ feeds: data, spinning: false, isDataCollected: true })
                    }
                });
        }
        else {
            this.setState({spinning: false})
        }
    }

    getData() {
        fetch('/fetchIsDataExists') // this method check if data has gotten or not
            .then(data => this.setState({isDataCollected: true }));
    }

    render() {
        const { feeds } = this.state;
        return (
            <div className="container-fluid">
                <Spin spinning={spinning} >
                    <a className="btn btn-primary" href="/auth/facebook">Reload</a>
                    {feeds.length > 0 ? <Feeds feeds={feeds} /> : <Alert />}
                </Spin>
            </div>
        );
    }
}

从Nodejs重定向回后，组件未更新

1 个答案: