如何在反应中正确实现负载更多

我有这段代码，它给出了我迭代的 12 个对象

class PokemonList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            pokemonList: [],
            apiTemplateUrl: "https://pokeapi.co/api/v2/pokemon?offset={number}&limit=12"
        }
        this.loadMore()        
    }

    loadMore=()=>{
        let num = 0;
        let apiTemplateUrl = this.state.apiTemplateUrl;
        let apiUrl = apiTemplateUrl.replace("{number}",num)
            fetch('https://pokeapi.co/api/v2/pokemon?offset=0&limit=12')
            .then((response) => {
                return response.json();
            })
            .then((listPokemons) => {
                listPokemons.results.forEach((aboutPokemon) => {
                    let aboutPokemonUrl = aboutPokemon.url;
                    fetch(aboutPokemonUrl)
                    .then((response) => {
                        return response.json();
                    })
                    .then((pokeData) => {
                        this.setState(prevState => ({
                            pokemonList: [...prevState.pokemonList, pokeData]
                          }))
                    })
                 })
            })
        }

带有加载更多按钮的组件

    render() {
        return (
            <div className="load-more">
                <button onClick={()=>this.props.loadMore()}>Load More</button>
            </div>
        );
    }

为了让我看到下一个 12，我需要在这里用 12 替换 0 并更改 fetch https://pokeapi.co/api/v2/pokemon?offset=0&limit=12

但是我该如何正确地做