L'état a changé mais la méthode de rendu de react ne se déclenche pas

Je suis actuellement en train d'apprendre moi-même le code et pour le moment plonger dans React.js. Je suis en train de créer une application simple qui affiche des informations sur la bière tirées de punkAPI ( https://punkapi.com/documentation/v2 ).

Dans mon application, je voulais ajouter une sorte de défilement "infini" qui extrairait plus de données de l'API lorsque l'utilisateur atteindrait le bas de la page.

À la moment, la méthode handleScroll fonctionne, et met à jour l'état du composant mais cela ne déclenche pas la méthode de rendu et je me demandais pourquoi.

Je me rends compte qu'il y a beaucoup de choses qui ne vont pas avec mon code et je prévoyez de le restructurer, ajoutez des booléens dans this.state pour vérifier s'il y a encore plus de données à charger, pour gérer les erreurs et pour ne pas déclencher la méthode handleScroll de manière aussi intensive.

Cependant, je me demande toujours pourquoi il n'y a pas de rendu même si l'état est mis à jour.

class BeerList extends Component {
    constructor() {
        super()
        this.state = {
            loading: false,
            beers: []
        }
        this.handleScroll = this.handleScroll.bind(this)
    }

    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll, true);

        this.setState({
            loading: true
        })
        fetch("https://api.punkapi.com/v2/beers?per_page=12")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    loading: false,
                    beers: data
                })
            })
    }

    handleScroll() {
        const checkForNewBeers = () => {
            let lastBeerCard = document.querySelector(".beer-list > div:last-child");
            let lastBeerCardOffset = lastBeerCard.offsetTop + lastBeerCard.clientHeight;
            let pageOffset = window.pageYOffset + window.innerHeight;

            if (pageOffset <= lastBeerCardOffset - 10) {
                return;
            }
            this.setState(prevState => {
                const beers = prevState.beers;
                const page = (prevState.beers.length / 12) + 1;
                fetch(`https://api.punkapi.com/v2/beers?per_page=12&page=${page}`)
                    .then(response => response.json())
                    .then(data => {
                        for (let item of data) {
                            beers.push(item);
                        }
                        console.log({
                            beers: beers
                        });
                        return {
                            beers: beers
                        }
                    });
            });
        }
        document.addEventListener("scroll", function (event) {
            checkForNewBeers();
        });
    }


    render() {
        let beerCards = []
        if (this.state.beers.length > 0) {
            beerCards = this.state.beers.map(beer => {
                return <BeerCard
                key = {
                    beer.id
                }
                img = {
                    beer.image_url
                }
                title = {
                    beer.name
                }
                description = {
                    beer.description
                }
                />
            })
        }

        return ( <
            div className = "container" >
            <
            div className = "row beer-list" > {
                beerCards
            } <
            /div> < /
            div >
        )
     }

}

export default BeerList

Ainsi, les BeerCards sont correctement ajoutées lorsque la page se charge puis lorsque vous faites défiler la console vous montre que l'état est mis à jour (beaucoup trop mais quand même). Je m'attendrais à ce que la page charge une tonne de BeerCards mais rien ne se passe. Pourquoi cela?