Javascript 无法正确映射

我希望将firebase数据库中的值存储到我的RN项目中

我能够通过终端正确记录对象

我没有正确更新我的设置状态，团队数组应该用teamScore填充

以下是我的firebase数据结构：

下面是我的代码：

class WesternIndex extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        dallasTeam: [],
        denverTeam: [],
        goldenStateTeam: [],
    };
}

componentDidMount() {
    this.getRef().child('Western_Teams').on('child_added', snapshot => {
        if (snapshot.exists()) {
            // console.log(snapshot.val()) //val logs Object
            // console.log(snapshot.key)   //key logs city name
        }
        let that = this;
        this.getRef().child('Western_Teams').once('child_added', function(snapshot){
            let scores = [];
            snapshot.forEach(function(data) {
                let score = {
                    id: data.val().key
                }
                const printThis = scores.push(score);
                console.log('prints = ', (printThis)); // prints the number 1, 15 times
                that.setState({
                    teamScore: scores
                });
            });
        })
    })

    });
}

getRef = () => {
    return firebase.database().ref();
}

下面是我的日志在val/key中的样子

这是printThis的日志

您似乎（意外地）为Firebase实时数据库嵌入了两个侦听器。另外，请注意（'child_added'）侦听器上的

将同时为一个孩子触发
，因此您的初始
forEach
可能是错误的

尝试用此替换您的
组件didmount

componentDidMount() {
    this.getRef().child('Western_Teams').on('child_added', snapshot => {
        if (snapshot.exists()) {
            this.setState({
                teamScore: scores.concat(data.val);
            });
        }
    });
}

虽然我并不完全理解您试图实现的目标，但这段代码应该可以工作，并引导您朝着正确的方向前进。
您的函数似乎被调用了15次。因此，每次都会重新创建数组
scores
，并将其推送到一个元素。尝试直接推送到状态：

componentDidMount() {
    this.getRef().child('Western_Teams').on('child_added', (snapshot) => {
        if (snapshot.exists()) {
            // console.log(snapshot.val()) //val logs Object
            // console.log(snapshot.key)   //key logs city name
        }
        this.getRef().child('Western_Teams').once('child_added', (snapshot) => {
            snapshot.forEach( (data) => {
                let score = {
                    id: data.val().key
                };
                this.setState( (prevState) => ({
                    teamScore: [...prevState.teamScore, score]
                }));
            });
        });
    });
}

另外，对于数组函数，不需要使用
that=this
技巧。
有什么问题？你的问题是什么？我没有正确更新我的设置状态，团队数组应该用TeamScore填充你的数组
分数
长度为1。这意味着
函数（快照）
被调用了15次。你希望它被调用一次并得到15个快照吗？不幸的是，这不起作用。我试图从快照映射key/val——我相信我必须使用map方法，除非我误解了你的回答，你想在哪里映射？