Я создал приложение React, которое использует fetch() для файла маршрута на componentDidMount для построения данных в визуализированном компоненте.
Это прекрасно работает, но компонент React статичен, когдаданные в базе данных MySQL обновляются.
Как мне обновить компонент React с любыми изменениями при изменении данных в базе данных MySQL?Пожалуйста, посмотрите пример моего кода ниже.
Файл реагирования - response.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.Спасибо!