Question

对不起，我的英语不是我的母语，所以请不要过多减去我。我是编程的初学者，并且正在从Internet上的教程中学习。今天是我第一次问堆栈溢出问题。这可能是一个愚蠢的问题，我知道有很多类似的问题，但这是一个不同的问题，不是重复的。让我谈我的问题。

我有一个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;

Answer 2

有时您需要将“格子”按钮放在表单元素中，在这种情况下，只需将(e) => e.preventDefault()作为onClick处理程序传入

<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})}
    onClick={(e) => e.preventDefault()}
/>

React Plaid Component刷新页面

2 个答案: