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

bugfix> javascript > 投稿

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

あなたの答え

関連記事