javascript - 如何访问该函数内的数据？我相信这是一个 promise ，但我不确定

Question

我想从 doc.data 获取数据，并根据我点击的下拉列表将其传递给另一个组件。我相信数据采用 promise 格式，但我尝试了异步并等待，但访问此数据时仍然遇到问题。请有人协助我如何访问这些数据以及如何将其传递给另一个组件。谢谢

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 函数不会返回任何内容。尝试在 db.collection("challenge_grids") 之前添加 return，将 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)
}

要将数据传递给另一个组件，您需要将结果保存到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>
    );
}

挑剔:你应该避免在这一行中直接操作 DOM:document.getElementById("myDropdown").classList.toggle("show")

而是尝试在组件中设置另一个状态来决定 show 类是否附加到您的按钮。