[Echarts]React项目中无法刷新数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Echarts]React项目中无法刷新数据相关的知识，希望对你有一定的参考价值。
参考技术A 在react新项目中 使用react-for-echarts中导出的ReactCharts组件，默认通过option的series选项更新数据参数，但是发现组件没有触发重绘？？通过暴力设置key值强制该组件卸载刷新，缺点是可能存在性能损耗
每个echarts图表都有一个实例instance，可以借助getEchartsInstance（）函数获取到，实例中的setOption支持更新数据。
ecahrts 实例方法
React Js：在页面手动刷新之前无法登录
【中文标题】React Js：在页面手动刷新之前无法登录【英文标题】：React Js : Unable to login until page gets refresh manually 【发布时间】：2021-11-11 18:49:02 【问题描述】：作为 React Js 的初学者，我正在尝试简单的项目来获得实践经验和学习！所以，以同样的方式，我通过观看 YouTube 教程创建了一个带有 react js 和 WAMP 服务器的登录门户 在中间，我遇到了一些错误，但不知何故我设法解决了它们，但是在完成项目后，当我尝试使用我在数据库中提供的凭据登录时，响应和一切都很清楚，但是 页面单击登录按钮后不会重定向到欢迎页面，而是在手动刷新后重定向到欢迎页面。我无法识别代码中的错误。
LoginForm.js
import React from 'react';
import InputField from './InputField';
import SubmitButton from './SubmitButton';
import UserStore from './stores/UserStore';
class LoginForm extends React.Component
constructor(props)
super(props);
this.state =
username: "",
password: "",
buttonDisabled: false
setInputValue(property, val)
val = val.trim();
if (val.length > 12)
return;
this.setState(
[property]: val
)
resetForm()
this.setState(
username: "",
password: "",
buttonDisabled: false
)
async doLogin()
if (!this.state.username)
return;
if (!this.state.password)
return;
this.setState(
buttonDisabled: true
)
try
let res = await fetch('/login',
method: "post",
headers:
'Accept': 'application/json',
'Content-Type': 'application/json'
,
body: JSON.stringify(
username: this.state.username,
password: this.state.password
)
);
let result = await res.json();
if (result && result.succes)
UserStore.isLoggedIn = true;
UserStore.username = result.username;
else if (result && result.succes === false)
this.resetForm();
alert(result.msg);
catch (e)
console.log(e);
this.resetForm();
render()
return (
<div className="loginForm">
Log In
<InputField
type='text'
placeholder='Username'
value=this.state.username ? this.state.username : ''
onChange=(val) => this.setInputValue('username', val)
/>
<InputField
type='password'
placeholder='Password'
value=this.state.password ? this.state.password : ''
onChange=(val) => this.setInputValue('password', val)
/>
<SubmitButton
text='Log In'
disabled=this.state.buttonDisabled
onClick=() => this.doLogin()
/>
</div>
);
export default LoginForm;
SubmitButton.js
import React from 'react';
class SubmitButton extends React.Component
render()
return (
<div className="submitButton">
<button
className='btn'
type='submit'
disabled=this.props.disabled
onClick=() => this.props.onClick()
>
this.props.text
</button>
</div>
);
export default SubmitButton;
App.js
import React from 'react';
import observer from 'mobx-react';
import UserStore from './stores/UserStore';
import LoginForm from './LoginForm';
import SubmitButton from './SubmitButton';
import './App.css';
class App extends React.Component
async componentDidMount()
try
let res = await fetch('/isLoggedIn',
method: 'post',
headers:
'Accept': 'application/json',
'Content-Type': 'application/json'
);
let result = await res.json();
if (result && result.success)
UserStore.loading = false;
UserStore.isLoggedIn = true;
UserStore.username = result.username;
else
UserStore.loading = false;
UserStore.isLoggedIn = false;
catch (e)
UserStore.loading = false;
UserStore.isLoggedIn = false;
async doLogout()
try
let res = await fetch('/logout',
method: 'post',
headers:
'Accept': 'application/json',
'Content-type': 'application/json'
);
let result = await res.json();
if (result && result.success)
UserStore.isLoggedIn = false;
UserStore.username = '';
catch (e)
console.log(e);
render()
if (UserStore.loading)
return (
<div className="app">
<div className='container'>
Loading ,Please Wait...
</div>
</div>
);
else
if (UserStore.isLoggedIn)
return (
<div className="app">
<div className='container'>
Welcome UserStore.username
<SubmitButton
text='Log Out'
disabled=false
onClick=() => this.doLogout()
/>
</div>
</div>
);
return (
<div className="app">
<div className='container'>
<LoginForm />
</div>
</div>
);
export default observer(App);
Router.js
const bcrypt = require('bcrypt');
class Router
constructor(app, db)
this.login(app, db);
this.logout(app, db);
this.isLoggedIn(app, db);
login(app, db)
app.post('/login', (req, res) =>
let username = req.body.username;
let password = req.body.password;
username = username.toLowerCase();
if (username.length > 12 || password.length > 12)
res.json(
success: false,
msg: 'An error occured,please try again'
)
return;
let cols = [username];
db.query('SELECT * FROM user WHERE username =? LIMIT 1', cols, (err, data, fields) =>
if (err)
res.json(
success: false,
msg: 'An error occured,please try again'
);
return;
if (data && data.length === 1)
bcrypt.compare(password, data[0].password, (bcryptErr, verified) =>
if (verified)
req.session.userID = data[0].id;
res.json(
success: true,
username: data[0].username
)
return;
else
res.json(
success: false,
msg: 'Invalid Password'
)
);
else
res.json(
success: false,
msg: 'User not Found,please try again..!'
)
);
);
logout(app, db)
app.post('/logout',(req,res)=>
if(req.session.userID)
req.session.destroy();
res.json(
success:true
)
return true;
else
res.json(
success:false
)
return false;
)
isLoggedIn(app, db)
app.post('/isLoggedIn',(req,res)=>
if(req.session.userID)
let cols =[req.session.userID];
db.query('SELECT * FROM user WHERE ID=? LIMIT 1',cols,(err,data,fields) =>
if(data && data.length ===1)
res.json(
success:true,
username:data[0].username
);
return true;
else
res.json(
success:false
);
);
else
res.json(
success:false
)
);
module.exports = Router;
【问题讨论】：
【参考方案1】：您必须更改 LoginForm.js 中的一些逻辑。有多种方法可以做到这一点。我给你看一个例子。
import React from 'react';
import InputField from './InputField';
import SubmitButton from './SubmitButton';
import UserStore from './stores/UserStore';
import Redirect from 'react-router-dom' //add a redirect from react-router-dom
class LoginForm extends React.Component
constructor(props)
super(props);
this.state =
username: "",
password: "",
buttonDisabled: false,
redirectToRefer : false //add a state here for redirect
setInputValue(property, val)
val = val.trim();
if (val.length > 12)
return;
this.setState(
[property]: val
)
resetForm()
this.setState(
username: "",
password: "",
buttonDisabled: false
)
async doLogin()
if (!this.state.username)
return;
if (!this.state.password)
return;
this.setState(
buttonDisabled: true
)
try
let res = await fetch('/login',
method: "post",
headers:
'Accept': 'application/json',
'Content-Type': 'application/json'
,
body: JSON.stringify(
username: this.state.username,
password: this.state.password
)
);
let result = await res.json();
if (result && result.succes)
UserStore.isLoggedIn = true;
UserStore.username = result.username;
this.setState(redirectToRefer:true)//set rediectToRefer as true
else if (result && result.succes === false)
this.resetForm();
alert(result.msg);
catch (e)
console.log(e);
this.resetForm();
render()
//add a condition at render if redirectToRefer is true then redirect to your page
if(redirectToRefer)
return <Redirect to ="/"/>
return (
<div className="loginForm">
Log In
<InputField
type='text'
placeholder='Username'
value=this.state.username ? this.state.username : ''
onChange=(val) => this.setInputValue('username', val)
/>
<InputField
type='password'
placeholder='Password'
value=this.state.password ? this.state.password : ''
onChange=(val) => this.setInputValue('password', val)
/>
<SubmitButton
text='Log In'
disabled=this.state.buttonDisabled
onClick=() => this.doLogin()
/>
</div>
);
export default LoginForm;
【讨论】：
以上是关于[Echarts]React项目中无法刷新数据的主要内容，如果未能解决你的问题，请参考以下文章
在子组件中使用Echarts图表无法刷新显示的问题（解决：子组件刷新）
React 17 + Vite + ECharts 实现疫情数据可视化「04 初始化项目」