如何有效地存储客户发票数据并按月份、日期或名称进行过滤
How to efficiently store customer invoice data and filter them by month, date or name
我正在做一个发票管理系统。我将使用 react-js。我必须存储发票详细信息,如卖家姓名、客户姓名、日期、价格、产品等。存储和检索数据的最佳和最有效的方法是什么。我需要数据来显示特定月份销售业绩的概览,因此我需要按月甚至按日期过滤它们。
Ps:刚开始在网络上存储数据,所以请多关照。
在 React 应用程序中有几种管理状态的方法,最简单的一种是组件状态(使用 class 组件通过使用 this.state 或使用带有 useState 钩子的钩子)。
如果您的应用程序很复杂,我建议您使用 Context API or using the redux 库。
以下示例将帮助您入门(假设您在本地存储中有 JSON 对象,您可以阅读有关浏览器本地存储的更多信息 here)。
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>
);
}
请记住,您可以创建一个自定义挂钩,从本地存储中读取所需的参数(如果未找到,则默认),并且 re-use 它在不同的组件中
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>
);
}
我正在做一个发票管理系统。我将使用 react-js。我必须存储发票详细信息,如卖家姓名、客户姓名、日期、价格、产品等。存储和检索数据的最佳和最有效的方法是什么。我需要数据来显示特定月份销售业绩的概览,因此我需要按月甚至按日期过滤它们。
Ps:刚开始在网络上存储数据,所以请多关照。
在 React 应用程序中有几种管理状态的方法,最简单的一种是组件状态(使用 class 组件通过使用 this.state 或使用带有 useState 钩子的钩子)。
如果您的应用程序很复杂,我建议您使用 Context API or using the redux 库。
以下示例将帮助您入门(假设您在本地存储中有 JSON 对象,您可以阅读有关浏览器本地存储的更多信息 here)。
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>
);
}
请记住,您可以创建一个自定义挂钩,从本地存储中读取所需的参数(如果未找到,则默认),并且 re-use 它在不同的组件中
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>
);
}