离线第一：重构链接请求在使用效果中混乱

Question

我必须开发一个应用程序，该应用程序的先决条件是将本地数据（indexedDB）作为优先级（无论网络是否可用。目标是不超载网络）。这是我的第一个ReactJS应用程序，我知道我没有正确的反射，

我设法编码一些东西，但这是一团糟，可能是货车。我必须在几页上应用相同的原则 我编码的页面非常简单：它显示供应商列表。此列表来自API，但我想将其存储在indexedDB中，然后使用IndexedDB中的数据。供应商清单不会改变

有人可以指导我写一些清洁的东西吗？

const SUPPLIERS_URL = "/suppliers.php";

const Fournisseurs = () => {
   
    const [suppliers, setSuppliers] = useState([]);
    const [nbSuppliers, setNbSupplier] = useState();

    useEffect(() => {
        const fetchFournisseurs = () => {
            const dbOpenRequest = indexedDB.open("salon", 1);
            // https://stackoverflow.com/questions/33054891/transactioninactiveerror-failed-to-execute-add-on-idbobjectstore-the-trans
            dbOpenRequest.onsuccess = function (event) {
                const db = event.target.result;
                const txn = db.transaction("suppliers", "readwrite");
                const store = txn.objectStore("suppliers");
                const countSuppliers = store.count();
                countSuppliers.onsuccess = function () {
                    setNbSupplier(countSuppliers.result);
                    console.log("nb fou", countSuppliers.result);
                };
                if (nbSuppliers !== 0) {
                    console.log("des suppliers dans indexeddb");
                    const getAllRequest = store.getAll();
                    getAllRequest.onsuccess = function () {
                        setSuppliers(getAllRequest.result);
                    };
                }
            };
        };
        fetchFournisseurs();
        const suppliersFromApi = async () => {
            console.log(" suppliersFromApi pas de suppliers dans indexeddb");
            await axios.post(SUPPLIERS_URL, "data").then(function (response) {
                console.log("list fou", suppliers);
                const dbOpenRequest = indexedDB.open("salon", 1);
                dbOpenRequest.onsuccess = function (event) {
                    const db = event.target.result;
                    const txn = db.transaction("suppliers", "readwrite");
                    const store = txn.objectStore("suppliers");
                    suppliers.forEach((supplier) => {
                        console.log("ajout fou");
                        store.add(supplier);
                    });
                };
                setSuppliers(response.data);
                setNbSupplier(response.data.count());
                console.log("nb de fou ds idb apr insert", response.data.count(), nbSuppliers);
            });

            console.log(suppliers);
        };
        if (nbSuppliers === 0) {
            suppliersFromApi();
        }
    }, [nbSuppliers]);