这可以改善吗？

Question

好的，我希望我能很好地解释这一点。 我正在创建一个可以查看消息的应用程序（具有本机反应）。在主屏幕上，您可以看到带有未读/新消息的徽章。在第一次加载应用程序时，这种方式不起作用，但是当我导航到另一个屏幕并返回首页时，它会显示徽章（短暂的延迟后，您将在代码中看到此信息）。

尽管它似乎可行，但我认为仍有改进的余地，所以我希望你们中的一员可以看一下代码，看看可以在哪里进行改进。

这是我到目前为止的代码：

export default class Home extends React.Component {
    constructor(props) {
        super(props)
        this.announce = firebase.firestore().collection('announcements');
        this.state = {
            newAnnouncements: 0,
        }
    }
    componentDidMount() {
        let userId;
        let countHasRead;
        let countAnnounce;
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                userId = user.uid
            }
        });
        setTimeout(() => {
            this.announce
                .get()
                .then(snapshot => {
                    countAnnounce = snapshot.size;
                });
            this.announce
                .where('hasread.userId', '==', userId)
                .get()
                .then(snapshot => {
                    countHasRead = snapshot.size;
                })
                .catch(err => {
                    console.log('Error getting documents', err);
                });
            setTimeout(() => {
                this.setState({newAnnouncements: countAnnounce - countHasRead});
            }, 1000);
        }, 500);
    }
}

并且不要在徽章中使用this.state.newAnnouncements。