React Plaid组件刷新页面

Question

对不起，我的英语，我不是母语人士，所以请不要过分拒绝我。 我是编程的初学者，我正在学习互联网上的教程。 今天是我第一次在Stack Overflow上提问。 这可能是一个愚蠢的问题，我知道有很多类似的问题，但这是一个不同的问题，它不是重复的。 让我转到我的问题。

我有一个反应组件，我正在使用react-plaid npm包来使用Plaid APi。 它可以在这里找到反应格子

我当前的组件代码如下所示

零件

import React, {Component} from 'react';
import BuggyApi from "../../services/BuggyApi";
import BlockUi from "react-block-ui";
import ReactPlaid from 'react-plaid'

class Integration extends Component{
    state={
        plaid_public_key: "",
        plaid_public_token: "",
        blocking: false,
        isSuccess: false,
        errorMessage: [],
        open: false,
        plaidData: [],
    };

    componentWillMount(){
        new BuggyApi().getPlaidPublicKey().then((response)=>{
            console.log(response.data);
            if(response.status===200){
                this.setState({
                    plaid_public_key: response.data.public_key
                });
            }
        }).catch((error)=>{

        })
    }


    handleOnExit = (error, metadata)=>{
        if (error != null) {
            console.log('link: user exited');
            console.log(error, metadata);
        }
    };
    handleOnLoad =()=>{
        console.log('link: loaded');
    };
    handleOnEvent =(eventname, metadata)=>{
        console.log('link: user event', eventname, metadata);

    };
    handleOnSuccess = (public_token, metadata) => {
        console.log('public_token: ' + public_token);
        console.log('account ID: ' + metadata.account_id);
    };
    componentDidMount(){
        const script = document.createElement("script");
        script.src = "https://cdn.plaid.com/link/v2/stable/link-initialize.js";
        script.async = true;
        document.body.appendChild(script);
    }



    render(){
        return(
            <div className="page-wrapper">
                <div className="content container-fluid">
                    <div className="row">
                        <div className="col-xs-8">
                            <h4 className="page-title">Integration</h4>
                        </div>
                        <div className="col-xs-4 text-right m-b-30">

                        </div>
                    </div>
                    <div className="row">
                        <div className="col-md-12">
                            <div className="text-center">
                                <h4 className="modal-title">
                                    Link your bank account
                                </h4>
                            </div>
                            <br/>
                            <br/>
                            <form>
                                {(this.state.isSuccess)?
                                    <div className="row">
                                        <div className="col-sm-6 col-sm-offset-3">
                                            <div className="alert alert-success">
                                                <strong>Success!</strong> Settings updated successfully!
                                            </div>
                                        </div>
                                    </div>:null
                                }
                                {(this.state.errorMessage.length>0)?
                                    <div className="row">
                                        <div className="col-sm-6 col-sm-offset-3">
                                            <div className="alert alert-danger">
                                                <ul>
                                                    {this.state.errorMessage.map((message,i) =><li key={i}>{message}</li>)}
                                                </ul>
                                            </div>
                                        </div>
                                    </div>:null
                                }
                                <BlockUi tag="div" blocking={this.state.blocking}>
                                    <div className="row">
                                        <div className="col-sm-6 col-sm-offset-3">
                                            {(this.state.plaid_public_key!=="")?
                                                <div>
                                                    <button onClick={() => this.setState({ open: true})}>Open Plaid</button>
                                                    <ReactPlaid
                                                        clientName="Arshad"
                                                        product={["auth"]}
                                                        apiKey={this.state.plaid_public_key}
                                                        env='sandbox'
                                                        open={this.state.open}
                                                        onSuccess={(token, metaData) => this.setState({plaidData: metaData})}
                                                        onExit={() => this.setState({open: false})}
                                                    />
                                                </div>:null
                                            }
                                        </div>
                                    </div>

                                </BlockUi>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        );
    };
}

export default Integration;  

问题是，当我单击打开链接按钮时，它只显示Plaid模型几秒钟，然后刷新应用程序页面。 我想知道是否有人有同样的东西可以帮助我。

注意：
请忽略您可以在apiKey = {this.state.plaid_public_key}中将其设置为“c10c40c4ee5eee97764307027f74c2”的公钥状态。 我正在使用axious从服务器获取公钥。

Answer 1

我想我发现了这个问题，虽然可以在stackoverflow上发布我的答案，以帮助其他人，如果有人遇到同样的问题。 我把react-plaid-link放在标签里面。 react-plaid-link返回一个按钮，根据html标准，没有“type”属性的表单内的按钮就像提交按钮一样。 在我的情况下也是如此，我单击它提交表单的按钮，这会导致刷新页面。 我通过删除标签来解决问题。 我的更新代码如下所示。

import React, {Component} from 'react';
import BuggyApi from "../../services/BuggyApi";
import BlockUi from "react-block-ui";
import ReactPlaid from 'react-plaid'

class Integration extends Component{
state={
    plaid_public_key: "",
    plaid_public_token: "",
    blocking: false,
    isSuccess: false,
    errorMessage: [],
    open: false,
    plaidData: [],
};

componentWillMount(){
    new BuggyApi().getPlaidPublicKey().then((response)=>{
        console.log(response.data);
        if(response.status===200){
            this.setState({
                plaid_public_key: response.data.public_key
            });
        }
    }).catch((error)=>{

    })
}


handleOnExit = (error, metadata)=>{
    if (error != null) {
        console.log('link: user exited');
        console.log(error, metadata);
    }
};
handleOnLoad =()=>{
    console.log('link: loaded');
};
handleOnEvent =(eventname, metadata)=>{
    console.log('link: user event', eventname, metadata);

};
handleOnSuccess = (public_token, metadata) => {
    console.log('public_token: ' + public_token);
    console.log('account ID: ' + metadata.account_id);
};
componentDidMount(){
    const script = document.createElement("script");
    script.src = "https://cdn.plaid.com/link/v2/stable/link-initialize.js";
    script.async = true;
    document.body.appendChild(script);
}



render(){
    return(
        <div className="page-wrapper">
            <div className="content container-fluid">
                <div className="row">
                    <div className="col-xs-8">
                        <h4 className="page-title">Integration</h4>
                    </div>
                    <div className="col-xs-4 text-right m-b-30">

                    </div>
                </div>
                <div className="row">
                    <div className="col-md-12">
                        <div className="text-center">
                            <h4 className="modal-title">
                                Link your bank account
                            </h4>
                        </div>
                        <br/>
                        <br/>
                            {(this.state.isSuccess)?
                                <div className="row">
                                    <div className="col-sm-6 col-sm-offset-3">
                                        <div className="alert alert-success">
                                            <strong>Success!</strong> Settings updated successfully!
                                        </div>
                                    </div>
                                </div>:null
                            }
                            {(this.state.errorMessage.length>0)?
                                <div className="row">
                                    <div className="col-sm-6 col-sm-offset-3">
                                        <div className="alert alert-danger">
                                            <ul>
                                                {this.state.errorMessage.map((message,i) =><li key={i}>{message}</li>)}
                                            </ul>
                                        </div>
                                    </div>
                                </div>:null
                            }
                            <BlockUi tag="div" blocking={this.state.blocking}>
                                <div className="row">
                                    <div className="col-sm-6 col-sm-offset-3">
                                        {(this.state.plaid_public_key!=="")?
                                            <div>
                                                <button onClick={() => this.setState({ open: true})}>Open Plaid</button>
                                                <ReactPlaid
                                                    clientName="Arshad"
                                                    product={["auth"]}
                                                    apiKey={this.state.plaid_public_key}
                                                    env='sandbox'
                                                    open={this.state.open}
                                                    onSuccess={(token, metaData) => this.setState({plaidData: metaData})}
                                                    onExit={() => this.setState({open: false})}
                                                />
                                            </div>:null
                                        }
                                    </div>
                                </div>

                            </BlockUi>
                    </div>
                </div>
            </div>
        </div>
    );
};
}

 export default Integration;