Javascript React Plaid组件刷新页面
对不起，我的英语不是以英语为母语的，所以请不要过多地贬低我。我是一名编程初学者，我正在从互联网上的教程中学习。今天是我第一次问关于堆栈溢出的问题。这可能是一个愚蠢的问题，我知道有很多类似的问题，但这是一个不同的问题，不是重复的问题。让我进入我的问题 我有一个react组件，其中我使用react plaid npm包来使用plaid APi。可以在这里找到 我当前的组件代码如下所示 组件Javascript React Plaid组件刷新页面,javascript,reactjs,react-redux,plaid,Javascript,Reactjs,React Redux,Plaid,对不起，我的英语不是以英语为母语的，所以请不要过多地贬低我。我是一名编程初学者，我正在从互联网上的教程中学习。今天是我第一次问关于堆栈溢出的问题。这可能是一个愚蠢的问题，我知道有很多类似的问题，但这是一个不同的问题，不是重复的问题。让我进入我的问题 我有一个react组件，其中我使用react plaid npm包来使用plaid APi。可以在这里找到 我当前的组件代码如下所示 组件 import React, {Component} from 'react'; import BuggyApi
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;
import React，{Component}来自'React'；
从“../../services/BuggyApi”导入BuggyApi；
从“反应块ui”导入块ui；
从“react plaid”导入ReactPlaid
类集成扩展了组件{
陈述={
格子布公共钥匙：“”，
格子图案\u公共\u标记：“”，
阻塞：错误，
isSuccess:false，
错误消息：[]，
开：错，
plaidData:[]，
};
组件willmount（）{
新建BuggyApi（）.getPlaidPublicKey（）.then（（响应）=>{
console.log（response.data）；
如果（响应状态===200）{
这是我的国家({
格子公用密钥：response.data.public\u密钥
});
}
}).catch（（错误）=>{
})
}
handleOnExit=（错误，元数据）=>{
if（错误！=null）{
log（'link:user exited'）；
日志（错误、元数据）；
}
};
handleOnLoad=（）=>{
log（'link:loaded'）；
};
handleOnEvent=（事件名称，元数据）=>{
log（'link:user event'，eventname，metadata）；
};
handleOnSuccess=（公共令牌、元数据）=>{
log（'public_-token:'+public_-token）；
console.log（'account ID:'+metadata.account\u ID）；
};
componentDidMount（）{
常量脚本=document.createElement（“脚本”）；
script.src=”https://cdn.plaid.com/link/v2/stable/link-initialize.js";
script.async=true；
document.body.appendChild（脚本）；
}
render（）{
返回(
整合
连接你的银行账户
{（this.state.issucess）？
成功！设置更新成功！
：null
}
{（this.state.errorMessage.length>0）？
{this.state.errorMessage.map（（message，i）=>- {message}
）}
：null
}
{（this.state.plaid\u public\u key！==“”）吗？
this.setState（{open:true}}>openplaid
this.setState（{plaidData:metaData}）}
onExit={（）=>this.setState（{open:false}）}
/>
：null
}
);
};
}
导出默认集成；
请忽略公钥状态，您可以在apiKey={this.state.plaid_public_key}中将其设置为“C10C4EE5EEE97764307027F74C2”。我正在使用axious从服务器获取公钥。我认为我发现了问题，尽管可以将我的答案发布在stackoverflow上，以帮助其他人解决同样的问题。我把react格子链接放在标签里面。react plaid链接返回一个按钮，根据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;
import React，{Component}来自'React'；
从“../../services/BuggyApi”导入BuggyApi；
从“反应块ui”导入块ui；
从“react plaid”导入ReactPlaid
类集成扩展了组件{
陈述={
格子布公共钥匙：“”，
格子图案\u公共\u标记：“”，
阻塞：错误，
isSuccess:false，
错误消息：[]，
开放：fal