React Plaid 组件刷新页面
[英] React Plaid Component Refreshes the page
本文介绍了React Plaid 组件刷新页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
抱歉我的英语，我不是母语人士，所以请不要过多地贬低我.我是编程的初学者，我正在从互联网上找到的教程中学习.今天是我第一次在 Stack Overflow 上提问.这可能是一个愚蠢的问题，我知道有很多类似的问题，但这是一个不同的问题，它不是重复的.让我转到我的问题.
我有一个 react 组件，我在其中使用 react-plaid npm 包来使用 Plaid APi.它可以在这里找到 react-plaid
我当前的组件代码是这样的
组件
import React, {Component} from 'react';从../../services/BuggyApi"导入 BuggyApi；从react-block-ui"导入 BlockUi；从反应格子"导入 ReactPlaid类集成扩展组件{状态={plaid_public_key: "",plaid_public_token:"，阻塞:假，isSuccess: 假,错误信息: []，打开:假，格子数据:[]，};componentWillMount(){new BuggyApi().getPlaidPublicKey().then((response)=>{控制台日志(响应数据)；如果(响应.状态===200){this.setState({plaid_public_key: response.data.public_key});}}).catch((错误)=>{})}handleOnExit =(错误，元数据)=>{如果(错误！= null){console.log('链接:用户退出');控制台日志(错误，元数据)；}};handleOnLoad =()=>{console.log('链接:加载');};handleOnEvent =(事件名称，元数据)=>{console.log('link: user event', eventname, metadata);};handleOnSuccess = (public_token, metadata) =>{console.log('public_token:' + public_token);console.log('账户 ID:' + metadata.account_id);};componentDidMount(){const script = document.createElement(脚本");script.src = "https://cdn.plaid.com/link/v2/stable/link-initialize.js";script.async = true;document.body.appendChild(script);}使成为(){返回(<div className="page-wrapper"><div className="content container-fluid"><div className="row"><div className="col-xs-8"><h4 className="page-title">集成</h4>
<div className="col-xs-4 text-right m-b-30">
<div className="row"><div className="col-md-12"><div className="text-center"><h4 className="modal-title">关联您的银行账户
<br/><br/><表格>{(this.state.isSuccess)?<div className="row"><div className="col-sm-6 col-sm-offset-3"><div className="alert alert-success"><strong>成功！</strong>设置更新成功！
: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>)}
:null}<BlockUi tag="div";阻塞={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})}>打开格子</button><ReactPlaidclientName=Arshad"产品={[认证"]}apiKey={this.state.plaid_public_key}环境=沙箱"打开={this.state.open}onSuccess={(token, metaData) =>this.setState({plaidData: metaData})}onExit={() =>this.setState({open: false})}/>
:null}
</BlockUi></表单>
);};}导出默认集成；
问题是当我单击打开链接按钮时，它只显示 Plaid 模型几秒钟，然后刷新应用程序页面.我想知道是否有人有同样的情况并且可以帮助我.
注意:
请忽略公钥状态，您可以将其设置为c10c40c4ee5eee97764307027f74c2"；在 apiKey={this.state.plaid_public_key} 中.我正在使用 axious 从服务器获取公钥.
解决方案
我想我发现了这个问题，尽管如果有人遇到同样的问题，可以在 stackoverflow 上发布我的答案以帮助其他人.我将 react-plaid-link 放在标签内.react-plaid-link 返回一个按钮，根据 html 标准，没有type"属性的表单内的按钮就像提交按钮一样.在我的情况下也是如此，我单击按钮提交表单，导致刷新页面.我通过删除标签解决了这个问题.我更新后的代码如下所示.
import React, {Component} from 'react';从 "../../services/BuggyApi" 导入 BuggyApi；从react-block-ui"导入 BlockUi；从反应格子"导入 ReactPlaid类集成扩展组件{状态={plaid_public_key: "",plaid_public_token: "",阻塞:假，isSuccess: 假,错误信息: []，打开:假，格子数据:[]，};componentWillMount(){new BuggyApi().getPlaidPublicKey().then((response)=>{控制台日志(响应数据)；如果(响应.状态===200){this.setState({plaid_public_key: response.data.public_key});}}).catch((错误)=>{})}handleOnExit =(错误，元数据)=>{如果(错误！= null){console.log('链接:用户退出');控制台日志(错误，元数据)；}};handleOnLoad =()=>{console.log('链接:加载');};handleOnEvent =(事件名称，元数据)=>{console.log('link: user event', eventname, metadata);};handleOnSuccess = (public_token, metadata) =>{console.log('public_token:' + public_token);console.log('账户 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);}使成为(){返回(<div className="page-wrapper"><div className="内容容器流体"><div className="row"><div className="col-xs-8"><h4 className="page-title">集成</h4><div className="col-xs-4 text-right m-b-30">
<div className="row"><div className="col-md-12"><div className="text-center"><h4 className="modal-title">关联您的银行账户
<br/><br/>{(this.state.isSuccess)?<div className="row"><div className="col-sm-6 col-sm-offset-3"><div className="alert alert-success"><strong>成功！</strong>设置更新成功！
: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>)}
: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})}>打开格子</button><ReactPlaid客户名称=阿尔沙德"产品={[认证"]}apiKey={this.state.plaid_public_key}环境=沙箱"打开={this.state.open}onSuccess={(token, metaData) =>this.setState({plaidData: metaData})}onExit={() =>this.setState({open: false})}/>
:null}
</BlockUi>
);};}导出默认集成；
Sorry for my English, I'm not a native speaker so please don't minus me too much. I'm a beginner in programming and I'm learning from tutorials found on internet. Today is my first time asking a question on Stack Overflow. It's probably a silly question, I know there are many similar questions, but it's a different issue, it's not a duplicate. Let me move to my question.
I have a react component in which I'm using react-plaid npm package to use Plaid APi. it can be found here react-plaid
My current component code looks like this
Component
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;
The problem is when I click the open link button it just shows the Plaid model for few seconds and then refreshes the application page. I'm wondering if someone had the same and can help me out there.
Note:
Please ignore the public key state you can just set it to "c10c40c4ee5eee97764307027f74c2" in apiKey={this.state.plaid_public_key}. I'm getting the public key from the server using axious.
解决方案
I think I found the issue and though it'd be OK to post my answer on stackoverflow to help others if anyone ever faces the same problem. I was putting the react-plaid-link inside the tags. The react-plaid-link returns a button which according to the html standard a button inside a form without "type" attribute acts like a submit button. Same goes here in my case which I click the the button it submit the form which causes refreshing page. I fixed the issue by just removing the tags. My updated code looks like this.
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;
这篇关于React Plaid 组件刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
