Json 如何正确实施'；加载更多'；按钮反应

我有这个代码，它给出了我映射的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>
        );
    }

render（）{
返回(
this.props.loadMore（）}>loadMore
);
}

为了让我给出下一个12，我需要在这里用12替换0，并更改fetch

但我怎样才能做到这一点呢

---

谢谢大家!

像这样使用JSX从状态渲染元素：

render() {
    const pokes = this.state.pokemonList
    return (
        <div className="load-more">
            <button onClick={()=>this.props.loadMore()}>Load More</button>
           {
               pokes.map(poke => {
                   return (<div>{poke.name}</div>)
               }
           }
        </div>
    );
}

render（）{
const pokes=this.state.pokemonList
返回(
this.props.loadMore（）}>loadMore
{
pokes.map（poke=>{
返回（{poke.name}）
}
}
);
}

您应该将偏移量存储在状态中。然后在获取后更新偏移量

首先将偏移量添加到您的状态

this.state = {
      pokemonList: [],
      offset: 0,
    };

然后可以使用该偏移量获取

fetch(`https://pokeapi.co/api/v2/pokemon?offset=${this.state.offset}&limit=12`)

然后你可以更新你选择的状态（在第二次之后？）

此外，您不需要在构造函数中运行此.loadMore（）。您可以在componentWillMount（）中运行它

api还返回下一个值，因此您可能希望存储该值（listpookemons.next）

.then(() => {
        this.setState(prevState => ({
          ...prevState,
          offset: prevState.offset + 12,
        }));
      })