我创建了一个react应用程序 fetch()
到上的路由文件 componentDidMount
在渲染组件中生成数据。
这非常有效,但是当mysql数据库中的数据更新时,react组件是静态的。
当mysql数据库中的数据发生更改时,如何用任何更改更新react组件?请看下面我的代码示例。
react文件-react.js
class myComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
}
}
// componentDidMount - When the component is mounted.
componentDidMount() {
// Retrieve project data from the database.
fetch('/retrieve-data', {
credentials: 'include'
})
.then((response) => {
if (response.ok) {
return response.json();
} else {
console.log('Error with session response');
}
})
.then((result) => {
// Set the state of data.
this.setState({
data: data
})
})
.catch((error) => {
console.log('Error: ', error);
});
}
render() {
return (
<div>
{/* Loop Data Array */}
{this.state.data.map((thisData, k) => (
<div key={k}>
{thisData.field1}
</div>
))}
</div>
)
}
}
路由文件-retrieve-data.js
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var connection = mysql.createConnection({
host: myHost,
user: myUser,
password: myPassword,
database: myDatabase
})
router.get('/', function(req, res, next) {
// Select data from the database.
connection.query("SELECT * FROM database_table", function (error, resultData, fields) {
// Send the result message back to the React application.
res.send({resultData});
});
});
module.exports = router;
数据是由单独路由文件上的webhook更新的,因此我可能希望服务器告诉react它需要更新,但前提是更改是相对于单个客户端看到的数据的。
抱歉这个问题,我很新的React。谢谢您!
3条答案
按热度按时间klsxnrf11#
正如@jonnyg所建议的,您可以使用websockets,事实上这是一种性能更好的方法,但这需要熟悉websockets,并且需要对服务器进行更改。
您可以在客户端实现的一个更简单的方法是实现一个轮询系统,即您基本上每隔x秒向服务器“询问”一次数据,并查看数据是否发生了变化。
你可以通过创建一个setinterval计时器来实现这一点,它将每x秒发出一次网络请求。
nbewdwxp2#
您可以考虑使用websockets将更新推送到前端。
基本流程为:
从服务器广播消息以在数据更改时对客户端作出React
在react中侦听“datachanged”事件,并在收到该事件时相应地更新react的状态
zd287kbt3#
https://www.npmjs.com/package/socket.io
你可以用
socket.io
传递变化。非传统的方法是设置一个前端循环,经常检查dom的更改和更新,但是当网站上有很多用户时,这会占用大量资源。