如何在反应中正确实现“加载更多”按钮答案

【问题标题】：How can I correctly implement 'load more' button in react如何在反应中正确实现“加载更多”按钮
【发布时间】：2020-03-19 20:22:39
【问题描述】：

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

但是我怎样才能正确地做到这一点谢谢！

【问题讨论】：

标签： json reactjs jsx

【解决方案1】：

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

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

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

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

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

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

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

另外，您不需要在构造函数中运行 this.loadMore()。您可以在 componentWillMount() 中运行它。

该 api 还返回下一个值，所以也许您想存储它而不是 (listPokemons.next)...

【讨论】：

【解决方案2】：

像这样使用 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>
    );
}

【讨论】：