Как я могу получить доступ к данным внутри этой функции? Я верю, что это обещание, но я не уверен

Question

Я хотел бы получить данные из do c .data и передать их другому компоненту, в зависимости от того, какой выпадающий список, но я нажимаю. Я считаю, что данные в формате обещания, но я попытался asyn c и жду, но у меня все еще есть проблемы с доступом к этим данным. Пожалуйста, кто-нибудь может помочь с тем, как получить доступ к этим данным и как я могу передать их другому компоненту. Спасибо

async function LChallenge() {
const db = firebase.firestore();
  var data;
  function load(){
    db.collection("challenge_grids").get().then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
    console.log(doc.id, " => ", doc.data());
    data = doc.data();
    return data
   });
   });
  }
let result = await load();
console.log(result)
}


function LoadChallenge() {

LChallenge()
function display_load(){
  document.getElementById("myDropdown").classList.toggle("show");
}

  return (
    <div class="Toggle-game-state">
    <button class="dropbtn" onClick={() => display_load()} >
      Load Challenge
      <div id="myDropdown" class="dropdown-content">
    <button class="myButton" >Challenge 1</button>
    <button class="myButton" >Challenge 2</button>
    <button class="myButton" >Challenge 3</button>
    </div>
    </button>
  </div>
    );
  }

Answer 1

Ваша load функция ничего не возвращает. Попробуйте добавить return перед db.collection("challenge_grids"), обновить querySnapShot.forEach в return querySnapshot.map

async function LChallenge() {
const db = firebase.firestore();
  var data;
  function load(){
    return db.collection("challenge_grids").get().then(function(querySnapshot) {
      return querySnapshot.map(function(doc) {
        console.log(doc.id, " => ", doc.data());
        data = doc.data();
        return data;
     });
   });
  }
let result = await load();
console.log(result)
}

Также, поскольку LChallenge - это функция async, я думаю, что ваша функция может быть упрощена еще больше:

async function LChallenge() {
    const db = firebase.firestore();
    const querySnapshot = await db.collection("challenge_grids").get();
    const result = querySnapshot.map(function (doc) {
        console.log(doc.id, " => ", doc.data());
        return doc.data();
    });
    console.log(result)
}

Чтобы передать данные другому компоненту, вам нужно сохранить result в состояние вашего LoadChallenge компонента.

Также вам нужно избегать вызова API при каждом рендеринге поэтому ваша LChallenge функция не должна вызываться напрямую в render. В этом примере это должно быть в вашей display_load функции

function LoadChallenge() {
    const [apiResult, setApiResult] = React.useState(null);

    async function LChallenge() {
        const db = firebase.firestore();
        const querySnapshot = await db.collection("challenge_grids").get();
        const result = querySnapshot.map(function (doc) {
            console.log(doc.id, " => ", doc.data());
            return doc.data();
        });
        console.log(result)
        setApiResult(result);
    }

    function display_load() {
        document.getElementById("myDropdown").classList.toggle("show");
        LChallenge()
    }

    return (
        <div class="Toggle-game-state">
            <button class="dropbtn" onClick={() => display_load()} >
                Load Challenge
                <div id="myDropdown" class="dropdown-content">
                    <button class="myButton" >Challenge 1</button>
                    <button class="myButton" >Challenge 2</button>
                    <button class="myButton" >Challenge 3</button>
                </div>
            </button>
            {!!apiResult && (
                <SomeComponent data={apiResult} />
            )}
        </div>
    );
}

Nitpick: вам следует избегать прямого манипулирования DOM в этой строке: document.getElementById("myDropdown").classList.toggle("show")

Вместо этого попробуйте иметь другое состояние в вашем Компонент, чтобы решить, присоединен ли класс show к вашей кнопке или нет.