APIにこれ以上情報がない場合にボタンを削除する方法

bugfix> javascript > 投稿 2020-08-22 19:44

次のコードはスムーズに実行されていますが、私がするときにそれを実装したい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'));

javascript

reactjs

axios

回答 4 件

実際の問題は次のとおりです。

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>)}

最初のもの getNextPers 何も返さず、コードで条件を使用して表示/非表示を実現できます
```
{ this.your_condition ? 
    <button onClick={this.getNextPers}>Ver Mais</button> : ''
}
```

Ramyaの答えに加えて、あなたも使用できます

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

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

bugfix

APIにこれ以上情報がない場合にボタンを削除する方法

javascript

reactjs

axios

関連記事