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需要更新的地方，但前提是更改是相对于单个客户端看到的数据而言的

对于这个问题，我很抱歉。谢谢！

Answer 1

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

您可以在客户端实施的一种更简单的方法是实施轮询系统，通过该轮询系统，您基本上可以每隔X秒向服务器“询问”数据，并查看其是否已更改。

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

Answer 2

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

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

非传统方法是设置一个前端循环，该循环经常检查更改和更新DOM，但是如果您的网站上有很多用户，则可能会占用大量资源。

Answer 3

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

基本流量为： 1.数据更改时，从服务器向React客户端广播消息 2.监听React中的“ dataChanged”事件，并在收到该事件时相应地更新React的状态

MySQL数据更改时更新React数据

3 个答案: