如何有效地存储客户发票数据并按月份、日期或名称进行筛选

Question

我正在制作一个发票管理系统。我将使用react js。我必须存储发票详细信息，如卖家名称、客户名称、日期、价格、产品等。什么是存储和检索数据的最佳和最有效的方法。我需要这些数据来显示特定月份的销售业绩概述，所以我需要按月份甚至日期进行筛选。

Ps：刚开始在网络上存储数据，所以请耐心等待。

Answer 1

在react应用程序中有几种管理状态的方法，最简单的一种是组件状态(通过使用this.state来管理类组件，或者通过使用带useState钩子的钩子来管理(。

如果您的应用程序很复杂，我建议使用Context API或使用redux库。

下面的示例将帮助您开始(假设本地存储中有JSON对象，您可以在此处阅读有关浏览器本地存储的更多信息(。

function App() {
const [state, setState] = React.useState({});

React.useEffect(() => {
async function load() {
const data = localStorage.getItem('invoice');

if (data) {
// local storage has strings stored in it, parse them before set state.
setState(JSON.parse(data));
}
}

load();
}, []);
return (
<div>
<span>{state?.id}</span>
</div>
);
}

请记住，您可以创建一个自定义挂钩，从本地存储读取所需的参数(如果找不到，则为默认值(，并在不同的组件中重复使用它

function useLocalStorage(key) {
const [item, setItem] = useState();

useEffect(() => {
async function load() {
const data = localStorage.getItem(key);

if (data) {
setItem(JSON.parse(data));
}
}

load():
}, [key]);

return item;
}

function App() {
const id = useLocalStorage('id');
const balance= useLocalStorage('balance');

return (
<div>
<span>{id}</span>
<span>{balance}</span>
</div>
);
}