查询时从状态返回长度为0的对象数组，但是记录数组会显示适当的长度。

Question

在函数内部，我首先创建当前状态的数组，以便在for循环中使用。但是，当试图获得它的长度时，它返回0。记录来自状态和新数组的数组显示，数组确实包含正确的对象，甚至显示长度作为适当的数量。

console.log(this.state.teams);
console.log(this.state.teams.length);
let sortedTeams = this.state.teams;
console.log(sortedTeams);
console.log(sortedTeams.length);

​

​

是什么导致长度被返回为0，即使它显然不是？该数组正在从防火墙中映射如下：

getTeamsAndSort() {
    let teams = [];
    docRef.collection('Teams').get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            let name = doc.data().name;
            let seeding = doc.data().seeding;
            let team = {name, seeding};
            teams.push(team);
        });
        teams.sort((a, b) => (a.seeding > b.seeding) ? 1 : -1);
    });
    this.setState({teams});
};

在调用teams[] ()之后立即调用需要getTeamsandSort长度的函数，以防出现异步问题。

Answer 1

docRef.collection('Teams').get()是异步的，在查询完成之前立即返回。事实上，所有返回承诺的函数都将以相同的方式运行。您的代码只能在承诺在then块中解析后才使用查询的结果。

在数据库的结果完成之前，您的代码正在使用一个空的teams数组调用this.setState({teams});。您应该只设置回调中的状态：

getTeamsAndSort() {
    let teams = [];
    docRef.collection('Teams').get()
    .then(querySnapshot => {
        querySnapshot.forEach(function(doc) {
            let name = doc.data().name;
            let seeding = doc.data().seeding;
            let team = {name, seeding};
            teams.push(team);
        });
        teams.sort((a, b) => (a.seeding > b.seeding) ? 1 : -1);
        // only set the state after the teams are available
        this.setState({teams});
    });
};

还请记住，在调用getTeamsAndSort之后，您将无法立即访问团队的长度，因为现在整个过程都是异步的。底线是，您必须学习如何有效地处理这样的数据库查询的承诺。

Answer 2

是什么导致长度被返回为0，即使它显然不是？

这是因为当您记录它时，长度是0。但是，如果您悬停在"i“图标上(在Chrome检查控制台中)，您将看到一条消息，即当对象更改时，控制台中的对象将被更新。

您可以使用以下方法防止误导性日志：

console.log(JSON.parse(JSON.stringify(sortedTeams)));

解决您的问题的可能方法是：

getTeamsAndSort = () => {
    let teams = [];
    docRef.collection('Teams').get()
    .then(querySnapshot => {
        querySnapshot.forEach(function(doc) {
            let name = doc.data().name;
            let seeding = doc.data().seeding;
            let team = {name, seeding};
            teams.push(team);
        });
        teams.sort((a, b) => (a.seeding > b.seeding) ? 1 : -1);
        return new Promise((resolve, reject) => {
            // resolve the promise after state is set
            this.setState({teams}, resolve);
        })
    });
};

然后，如果需要在调用this.state.teams后立即使用getTeamsAndSort，请等待Promise，以确保在记录状态或访问其属性之前更新状态。

async someFunc() {
    await getTeamsAndSort()
    console.log(JSON.parse(JSON.stringify(sortedTeams)));
}