当 MySQL 数据更改时更新 React 数据

Question

我创建了一个 React 应用程序，它使用fetch()路由文件componentDidMount来构建渲染组件中的数据。

这很好用，但是当 MySQL 数据库中的数据更新时，React 组件是静态的。

当 MySQL 数据库中的数据发生更改时，如何使用任何更改更新我的 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 很陌生。谢谢！

Answer 1

您可以考虑使用 Web 套接字将更新推送到前端。

基本流程是：

1. 数据更改时从服务器向 React 客户端广播消息
2. 在 React 中侦听 'dataChanged' 事件，并在收到此事件时相应地更新 React 的状态

Answer 2

https://www.npmjs.com/package/socket.io

您可以socket.io用来中继更改。

非常规方法是设置一个前端循环，经常检查更改并更新 DOM，但是当您的网站上有很多用户时，这可能会占用大量资源。

Answer 3

虽然您可以按照 @jonnyg 的建议使用 Web 套接字，而且事实上这是性能更高的方法，但需要熟悉 Web 套接字并且需要在服务器上进行更改。

您可以在客户端实现的一种更简单的方法是实现一个轮询系统，您基本上每隔 x 秒向服务器“询问”数据并查看它是否发生变化。

您可以通过创建一个 setInterval 计时器来做到这一点，该计时器将每隔 x 秒发出一次网络请求。