0

In the initialize file, I code like this.

import { initializeApp } from 'firebase/app';
import { getDatabase, ref, child, get  } from "firebase/database";

const config = {

};

const app = initializeApp(config);
const db = getDatabase(app);
const dbRef = (ref(db));

get(child(dbRef, "shop_data")).then((snap) => {
    console.log(snap.val())
})
export {dbRef};

From here, I receive one result from console.log firebase init

Now, in my Store component, I only put the get() function in

import '../css/StoreSelectable.css';
import { dbRef } from '../js/firebase_init';
import { getDatabase, ref, child, get  } from "firebase/database";

function StoreSelectable(){    
    const getStore = () => {
        get(child(dbRef, "shop_data")).then((snap) => {
            console.log(snap.val())
        })
        return;
    }
   

    return(
        <div className="Store-Selectable">
            <table id="place_option" align="center" style={{tableLayout: 'fixed'}} className="radioButtons collapseBorder">  
                <tbody>
                    
                        {getStore()}
                    
                </tbody>         
            </table>
            
        </div>
        
    );

}

export default StoreSelectable;

Now, firebase function fires twice. enter image description here

Edit 10/6/2022 I tried useEffect, but it still gets the data twice. I really do not want to use Firestore since I have to rewrite a lot of codes. What should I do in this situation?

import "../css/StoreSelectable.css";
import { dbRef } from "../js/firebase_init";
import { getDatabase, ref, child, get } from "firebase/database";
import { useEffect, useState } from "react";

function StoreSelectable() {
  const pin = {
    TestiKirppis: ["Jarii1", "spr1234", "6899bc73da4ace09"],
    Vaasa: ["D0ED5D57F47580F2", "spr9876", "Vas183"],
    Seinäjoki: ["a1a1a1a1a1a1a1a1", "spr9999", "Seina19"],
    Kokkola: ["regT863", "spr0000", "b4b8bb4ceeaa2aee"],
  };

  const [count, setCount] = useState([]);

  useEffect(() => {
    const getStore = () => {
        get(child(dbRef, "shop_data")).then((snap) => {
            let val = snap.val();
            Object.keys(val).forEach((key) => {
                setCount((count) => [...count, val[key].name]);
            })
        });
    }    
    getStore();

    
  }, []);

  return (
    <div className="Store-Selectable">
      <table
        id="place_option"
        align="center"
        style={{ tableLayout: "fixed" }}
        className="radioButtons collapseBorder"
      >
        <tbody>{count.map((data) => {return (<p>{data}</p>)})}</tbody>
      </table>
    </div>
  );
}

export default StoreSelectable;
Winston Lycan
  • 115
  • 9
  • This may be because of Strict Mode in react – Gulshan Aggarwal Jun 09 '22 at 16:08
  • Strict twice renders a component, please check inside your index.js file if you are using . – Gulshan Aggarwal Jun 09 '22 at 16:09
  • You're doing your fetching in the body of your component, so it's going to happen every time this component renders. You're lucky that it's only happening twice. You need to do this fetching either in a use effect, or something like an onClick, not in the body. – Nicholas Tower Jun 09 '22 at 16:20
  • I need to fetch it when the page is loaded, but when I try it with useState and useEffect, it triggers 4 times instead of 2, with 2 additional times when the variable is created. https://imgur.com/a/MODRfS9 – Winston Lycan Jun 10 '22 at 10:20

1 Answers1

1

I think it is because of strict mode in react 18. If you remove it, the issue will be resolved.

Please check : multiple execution of files leading to multiple server calls in react js

Gourab Paul
  • 21
  • 4
  • A mode detailed explanation of strict mode is provided in https://stackoverflow.com/questions/72112028/does-strict-mode-work-differently-with-react-18 – Gourab Paul Jun 10 '22 at 06:49
  • I really want to keep it on to track bugs, but even useEffect triggers twice so for the moment, I am turning it off. – Winston Lycan Jun 10 '22 at 11:21