javascript - 如果 api 中没有更多信息，如何删除按钮

Question

以下代码运行顺利，但我想以一种方式实现它，当我执行getNextPers()并且没有信息时，它会隐藏/删除Ver Mais按钮。我一直在寻找解决方案，但没有找到，所以任何帮助都是好的。谢谢你。

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class List extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            personagens: [],
            page: 1,
            showBtn: true,
        };
        this.getNextPers = this.getNextPers.bind(this);
    }

    getNextPers(){
        const peopleApiEndpoint = `https://swapi.co/api/people/${this.state.page}`;
        axios.get(peopleApiEndpoint).then((p) =>
            if(p=={}){
                this.setState({ showBtn: false });
            }
            else {
                this.setState({ personagens: this.state.personagens.concat(p), page: this.state.page+1 })
            }
        );
    }

    render(){
        return (
            <div>
                <p><b>Personagens:</b></p>
                {this.state.personagens.map((pers, i) => (
                    <div key={i}>
                        <br />
                        <p><i>Name:</i> {pers.data.name}</p>
                        <p><i>Height:</i> {pers.data.height} cm</p>
                        <p><i>Mass:</i> {pers.data.mass} kg</p>
                    </div>
                ))}
                <button onClick={this.getNextPers}>Ver Mais</button>
            </div>
        );
    }
}

ReactDOM.render(<List />, document.getElementById('root'));

标签： javascriptreactjsaxios

Answer 1

由于您将showBtn状态存储在组件中，因此可以使用它来有条件地呈现按钮，如下所示：

render(){
        return (
            <div>
                <p><b>Personagens:</b></p>
                {this.state.personagens.map((pers, i) => (
                    <div key={i}>
                        <br />
                        <p><i>Name:</i> {pers.data.name}</p>
                        <p><i>Height:</i> {pers.data.height} cm</p>
                        <p><i>Mass:</i> {pers.data.mass} kg</p>
                    </div>
                ))}
                { (this.state.showBtn) ?
                    <button onClick={this.getNextPers}>Ver Mais</button>
                    :
                    null
                }
            </div>
        );
    }