javascript - React Plaid 组件刷新页面

Question

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

我有一个 react 组件，我在其中使用 react-plaid npm 包来使用 Plaid APi。可以在这里找到 react-plaid

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

组件

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;  

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

注意:
请忽略公钥状态，您可以在 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;