MySQL 数据变化时更新 React 数据

Posted 2023-02-22

【中文标题】MySQL 数据变化时更新 React 数据

【英文标题】：Update React Data when MySQL Data Changes

【发布时间】：2019-05-21 03:09:36

【问题描述】：

我创建了一个 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 很陌生。谢谢！

【问题讨论】：

您需要从服务器发送推送通知，客户端正在侦听该通知，或者在客户端上设置一个间隔来 ping 服务器以进行偶尔的更新，或者在您 POST 后进行另一次获取到服务器，或者只是将发布的数据直接附加到状态，这应该与刷新的操作相同。

谢谢。由于数据将由 Webhook 更新，我如何告诉 Webhook 路由文件更改 React 中的状态？我正在考虑您提到的第三个选项来进行另一次提取。因此，我想当 Webhook 路由文件接收到 Webhook 时，我需要告诉客户端再次获取。谢谢！

我对 webhook 没有太多经验，但这里的核心选项是执行window.location.href='/myRoute'，这将强制页面完全刷新，并会导致您的componentDidMount fetch 到火。也就是说，我相信有 webhook 经验的人可以为您提供更好的见解。

【参考方案1】：

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

基本流程是：

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

【参考方案2】：

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

您可以使用socket.io 传递更改。

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

【参考方案3】：

虽然您可以使用 Web Sockets，正如 @jonnyg 所建议的那样，实际上这是一种性能更高的方法，但需要熟悉 Web Sockets 并且需要在服务器上进行更改。

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

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

【讨论】：

变化不会很大，例如，一个字段将从'Test1'变为'Test2'。所以我真的只需要大约每 10 秒轮询一次服务器。这会给客户绩效增加多少权重？谢谢你的回答。

虽然我不能给你一个确切的答案，但如果它是少量数据并且每 10 秒一次，你应该完全没问题。我最近实现了类似这样的东西，每 2 秒访问一次服务器以获取某些东西的进度，并且似乎没有任何性能影响。

我建立了一个网站，我认为是我和几个朋友在使用它，每 5 秒请求新的 API 数据并更新状态。最终一次大约有 40 个并发用户，而 MongoDB 每天都会崩溃。对这条路线要谨慎，我只会在封闭的环境中应用它，你知道只有少数用户在使用它的页面上花费有限的时间。

感谢您的帮助尼克。 @Dadsquatch - 该应用程序需要扩展，所以我现在很关心这个问题，并会先看看套接字。

是的，这听起来确实像您想要走的路线。祝你好运