当mysql数据更改时更新react数据

gpnt7bae  于 2021-06-15  发布在  Mysql
关注(0)|答案(3)|浏览(412)

我创建了一个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。谢谢您!

klsxnrf1

klsxnrf11#

正如@jonnyg所建议的,您可以使用websockets,事实上这是一种性能更好的方法,但这需要熟悉websockets,并且需要对服务器进行更改。
您可以在客户端实现的一个更简单的方法是实现一个轮询系统,即您基本上每隔x秒向服务器“询问”一次数据,并查看数据是否发生了变化。
你可以通过创建一个setinterval计时器来实现这一点,它将每x秒发出一次网络请求。

nbewdwxp

nbewdwxp2#

您可以考虑使用websockets将更新推送到前端。
基本流程为:
从服务器广播消息以在数据更改时对客户端作出React
在react中侦听“datachanged”事件,并在收到该事件时相应地更新react的状态

zd287kbt

zd287kbt3#

https://www.npmjs.com/package/socket.io
你可以用 socket.io 传递变化。
非传统的方法是设置一个前端循环,经常检查dom的更改和更新,但是当网站上有很多用户时,这会占用大量资源。

相关问题