当 ClearDB 数据库发生变化时更新 React Native 页面

Question

我正在开发这个基于二维码的应用程序，它使用存储在 Heroku 服务器上的 ClearDB MySQL 数据库。前端通过使用 Node.js 和 Express

构建的 REST API 与数据库通信

每当用户扫描二维码时，数据库中代码的值就会发生变化。但我不知道如何在前端立即反映这种变化。基本上我需要帮助的是找到一种方法来在数据库中的值发生变化时自动刷新页面并根据新值显示新的 QR 码。这样当用户扫描代码时，它会立即在他的页面上更新，而不仅仅是在数据库中。

我研究了套接字，但不太了解如何将其集成到我的应用程序中，尤其是在前端。

Answer 1

您如何存储二维码的信息？在 Redux 中？还是地方政府？您使用的是基于 class 的组件或挂钩吗？如果您想要最少的麻烦，我强烈建议您使用钩子。让我知道，我可以为代码提供更多细节。

您的最终产品将如下所示：

const [qrData, setQrData] = useState(null)

const updateDatabase = () => {
    axios.post(`your/database/url/with/your/data/attached`).then(res => {
        setQrData(res.data.your.response.object.from.database)
    }
}

Answer 2

您可以使用状态值来检测变化。您声明一个类型为布尔值的状态值（您想要的任何类型）。然后你可以在更新数据库数据的模块中实现 setState 函数（如果是 class 组件）或 useState 钩子（如果是功能组件）。例如：

const [isChanged, setChanged] = useState(false);
const updateQRData = (data) => {
... Update codes
setChanged(isChanged => !isChanged);
}

然后就可以使用useEffect hook了：

useEffect(() => {
... Write some codes
}, [isChanged]);

当 ClearDB 数据库发生变化时更新 React Native 页面

Update React Native page when there is a change in ClearDB database

node.js

cleardb

react-native