在哪里存储可变数据?

Question

我使用NextJs。我有10个按钮，0分。如果我点击一个按钮，无论我点击多少次，分数都只能增加1分，最高分数可以是10分。同时我不能禁用按钮。问题是哪一种方式是最好的实现这样的任务?

我认为有两种方法，但我不认为它们是正确的:

首先，我有db，并存储有10个按钮id与0或1点，我验证我的响应，如果它返回0或1。例如:[{btn_1:0}, {btn_2:1},..., {btn_7:0}, ...]。问题就在这里，它会有很多请求到db.

第二种方法是将按钮id和分数保存在本地存储中，并在一段时间内以某种方式与db同步。(我没有使用本地存储，但我相信这是可能的🙂)

Answer 1

第二种解决方案对用户来说要快得多。API调用可能需要一段时间才能解析，这取决于网速。

我会将数据存储在本地存储，然后使用useEffect创建一个Interval，可以定期从本地存储值更新您的数据库:

// Set up interval to put data into DB
useEffect(() => {
// Choose how frequently this update will run
const secondsBetweenUpdates = 10;
const intervalId = setInterval(() => {
const score = localStorage.getItem('score');
// A lazy API call. Call whatever your url is and pass it the data
axios.put('/api/score', { score: score })
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
})
}, secondsBetweenUpdates * 1000);
// Always clean up intervals created in useEffect
return () => clearInterval(intervalId);
}, []);

你会想要另一个useEffect从数据库中获取数据，当应用程序加载时给用户:

// Fetch data from DB and update localStorage
useEffect(() => {
axios.get('/api/score')
.then((res) => {
const savedScore = res.data;
localStorage.setItem('score', JSON.stringify(savedScore));
})
.catch((err) => {
console.log(err);
})
}, []);

Answer 2

如果您关心的是组件之间的动态数据通信，您应该查看状态管理工具，如React的Context或Redux(我强烈推荐RTK)。注意，这些数据只有在应用程序运行时才可用。如果您希望在用户关闭应用程序并返回时使其可用，则可以使用localStorage。但我建议不要将其用作临时数据存储工具。你仍然应该以利用数据库作为事实的主要来源为目标。

Answer 3

查看useState钩子:

import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

从https://reactjs.org/docs/hooks-state.html