从内部函数范围更新数组的值，然后在 Js 中返回它们？答案

【问题标题】：Update array's values from an inside function scope and then return them in Js?从内部函数范围更新数组的值，然后在 Js 中返回它们？
【发布时间】：2020-12-20 22:09:10
【问题描述】：

在这个 Filtered React.js 组件中，我使用数组（“foofy”）的值应用到用于过滤 map() 的返回语句中方法。该数组应由 Firebase 数据库中的条目填充，因此上面的函数 filter() 和 map()：

function Filtered () {
    let foofy = []
    alertMyAnsweredQuizzes()
    function alertMyAnsweredQuizzes () { 
        var user = firebase.auth().currentUser;
        if (user !== null) {
            const userId = user.uid
            let ref = firebase.database().ref('users (uid)/'+ userId);
            ref.on("value", function(snapshot) { // it does not get out from here!
                snapshot.forEach(function(childSnapshot) {
                    var key = childSnapshot.key;
                    foofy.push(key)
                }); 
                alert(foofy) 
                // foofy arrays should go outside into the return statement
                document.getElementById('myDiv').innerHTML += `==========`          
            })
        }
        else {
            document.getElementById('myDiv').innerHTML = `sign in to view your answered quizzes`
        }
   }
    return (
    list.filter((list) =>
        list.name == foofy[0] //should update by the function
        || list.name == foofy[1]
        || list.name == foofy[2]
        || list.name == foofy[3]
        || list.name == foofy[4]
        || list.name == foofy[5]
    ).map((list) =>
        <Link>
            {list.name}
        </Link>
    )  
    )

}

问题是我不明白如何在它自己的函数范围之外获取更新的数组。有人有想法吗？

谢谢！ ????

【问题讨论】：

... list.filter((list) ... 是列表列表吗？
几乎没有充分的理由在使用 react 时手动设置 innerHTML。这是 React 的责任。请改用条件渲染或其他方法。

标签： javascript arrays reactjs components

【解决方案1】：

基本上，由于发出网络请求，因此代码是异步的。所以我建议有一个加载器来显示何时获取数据，然后一旦数据从 Firebase 到达，您就可以删除加载器并显示数据。上面的示例实现可能如下所示，

function Filtered () {
    const [foofy, setFoofy] = React.useState([]);
    const [loading, setLoading] = React.useState(true);

    alertMyAnsweredQuizzes()
    function alertMyAnsweredQuizzes () { 
        var user = firebase.auth().currentUser;
        if (user !== null) {
            const userId = user.uid
            const ref = firebase.database().ref('users (uid)/'+ userId);
            ref.on("value", (snapshot) => { 
              const keys = [];
              snapshot.forEach(function(childSnapshot) {
                  var key = childSnapshot.key;
                  keys.push(key);
              }); 
              setFoofy(keys);
              setLoading(false);        
            })
        }
        else {
            // Code for login.
        }
   }

    if (loading) {
      return <h1>Loading....</h1>
    }

    return (
      foofy.filter((list) =>
        foofy.name == foofy[0] //should update by the function
        || foofy.name == foofy[1]
        || foofy.name == foofy[2]
        || foofy.name == foofy[3]
        || foofy.name == foofy[4]
        || foofy.name == foofy[5]
      ).map((list) => (
        <Link>
            {foofy.name}
        </Link>
      )  
    )
}

【讨论】：