次のコードはスムーズに実行されていますが、私がするときにそれを実装したい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'));
回答 4 件
最初のもの
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> ); }
関連記事
- 削除ボタンをクリックしたときに行を削除するにはどうすればよいですか?
- HTML/Javascriptでボタンがクリックされたかどうかを確認する方法はありますか?
- クリックしたボタンにクラスを追加し、前にクリックしたボタンからクラスを削除する方法
- ifステートメントで整数を削除するより短い方法はありますか?
- Liquidの多次元配列の重複を削除する方法はありますか?
- MongoDbの文字列の途中のスペースを削除する機能はありますか?
- ボタンをクリックしても、入力がまったく表示されません。フォームをhtmlから削除すると機能しますが、フォームで機能させたい
- SwiftUI:「戻るボタン」とnavigationbartitleの間のスペースを削除したい
- 正規表現から論理演算子を照合して削除する方法はありますか
- ここ81行目に、クラスに変更を加えて削除する必要のあるエラーがあります
関連した質問
- axiosの使用方法とJSONデータの取得方法
- axiosを使用してreactアプリでネットワークなしで作業する
- どうすれば解決できますか:「レンダリングから何も返されませんでした。これは通常、returnステートメントが欠落していることを意味します。または、何もレンダリングしない場合は、nullを返します。」
- Uberはスクロール矢印付きのタイプHorizontalScrollSpyを食べます
- JavaScriptを使用したスライドショーを使用したReactJSの画像モーダル
- コンポーネントがレンダリングされる前に一度だけフックを呼び出す(Meteor/React/Apollo/Graphql)
- Firebaseコードは100%正しいですが、状態はまだnullです(React)
- NextJsはサーバー側のレンダリングを介してFacebookタグをレンダリングします
- Reactjs無限スクロールコンポーネントは常に新しいデータをレンダリングします
- 別のページにあるボタンの値を呼び出すにはどうすればよいですか?
実際の問題は次のとおりです。
また、
swapi
空のオブジェクトの代わりに結果がなくなったときに404を返すので、catch
を追加する必要があります あなたのaxios.get
をブロックする ドキュメントに記載されているとおり:https://github.com/axios/axios#handling-errorsこれで、次のような条件付きレンダリングを使用できます。