Как удалить кнопку, если в API больше нет информации

Question

Следующий код работает без сбоев, но я хочу реализовать его таким образом, чтобы при выполнении getNextPers () и отсутствии информации он скрывал / удалял Ver Mais *Кнопка 1004 *.Я искал решения, но не нашел ни одного, поэтому любая помощь хороша.Спасибо.

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'));

Answer 1

Настоящая проблема здесь:

axios.get(peopleApiEndpoint).then((p) => {
    if (p == {}) { // THIS WILL NEWER WORK AS EXPECTED
        this.setState({showBtn: false});
    } else {
        this.setState({
            personagens: this.state.personagens.concat(p),
            page: this.state.page + 1
        });
    }
});

Также swapi возвращает 404, когда больше нет результатов вместо пустого объекта, поэтому вам нужно добавить блок catch к вашему axios.get, как описанов документах: https://github.com/axios/axios#handling-errors

axios.get(peopleApiEndpoint).then((p) => {
    this.setState({
        personagens: this.state.personagens.concat(p),
        page: this.state.page + 1
    });

}).catch((err) => {
    this.setState({showBtn: false});
});

Теперь вы можете использовать условный рендеринг, например:

{(this.state.showBtn && <button onClick={this.getNextPers}>Ver Mais</button>)}

Answer 2

Первое, что нужно getNextPers ничего не возвращает, и вы можете показать / скрыть, используя условие в вашем коде

{ this.your_condition ? 
    <button onClick={this.getNextPers}>Ver Mais</button> : ''
}

Answer 3

В дополнение к ответу Рами вы также можете использовать

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> }
            </div>
        );
    }

Answer 4

Поскольку вы сохраняете состояние 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>
        );
    }