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

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>
  );
}