Используя переменную состояния в функции, невозможно прочитать свойство x неопределенного (Functional React)

Question

Я использую firebase с реагирующими функциональными компонентами, я определяю db объект в использованииEffect и устанавливаю объект в такое состояние:

const [Db, setDb] = useState();

useEffect(() => {
    const db = firebase.database();
    setDb(db, checkStatus());
}, []);

const checkStatus = () => {

  Db.ref("orders")
    .once("value")
    .then(snapshot => {
        // do something
    });
}

Я дал checkStatus() в качестве обратного вызова для setDb(), который, как я верю, будет выполнен после того, как setDb() изменит состояние (обычно вызов checkStatus() в useEffect() также выдает такую ​​же ошибку). Теперь при вызове checkStatus() я получаю следующую ошибку:

TypeError: Cannot read property 'ref' of undefined

Я считаю, что checkStatus() выполняется перед изменением состояния, что приводит к неопределенности Db. Я не могу найти способ вызова функции после того, как значение состояния установлено на что-то, и каковы лучшие практики при вызове функций и использовании состояния как такового.

Answer 1

Вы можете использовать useEffect

const [Db, setDb] = useState();

useEffect(() => {
    const db = firebase.database();
    setDb(db);
}, []);

useEffect(() => {
    if(Db) {
    Db.ref("orders")
      .once("value")
      .then(snapshot => {
          // do something
      });
    }
}, [Db]);

Или вы можете установить firebase в useState

const [Db, setDb] = useState(() => firebase.database());

useEffect(() => {
    Db.ref("orders")
      .once("value")
      .then(snapshot => {
          // do something
      });
}, []);

Answer 2

Извлечение пользовательского хука, useDBStatus().

Этот пользовательский хук абстрагирует любую связь, связанную с БД, и просто возвращает то, что имеет отношение (т.е. статус).

function useDBStatus(ref) {
  const db = firebase.database();
  const [status, setStatus] = React.useState({});

  React.useEffect(() => {
    if (db) {
      db(ref)
        .once("value")
        .then(snapshot => {
          setStatus(/* something */);
        });
    }

    return () => { /* close db connection */ };
  }, [db, ref]);

  return status;
}

function Component() {
  const status = useDBStatus("orders");
  // use status
}