React JSを使用して、ユーザーがブランドをクリックしてInstagramから画像を取得できるようにするWebサイトを作成しています。ランディングページ/ landingで、ユーザーはブランドを選択でき、このブランド名はInstagramスクレーパーページ/ instagramScraperに渡されます：
this.props.history.push({
pathname: '/instagramScraper',
params: {
brandName: this.state.brand_name
}
});
Instagramスクレーパーページは、次のコードを使用してbrandNameを取得します。
this.state.brandName = props.location.params["brandName"];
これで、ユーザーはこの/ instagramScraperの画像をクリックできるようになり、画像を編集できる別のページ/ editPhotoに移動します。/ editPhotoから「戻るボタン」を選択すると、次のエラーが発生します。
TypeError: Cannot read property 'brandName' of undefined new Landing
src/components/instagramScraper.js:24
21 | this.onAddImages = this.onAddImages.bind(this);
22 | this.onScrape = this.onScrape.bind(this);
23 | this.learnMore = this.learnMore.bind(this);
> 24 | this.state.brandName = props.location.params["brandName"];
photoEditページから戻るボタンが選択されているときにbrandNameパラメーターを渡すにはどうすればよいですか？ランディングページでthis.setStateを使用しようとしましたが、brandNameの値がリセットされます。
したがって、パラメータとして渡すので、戻ると、そのパラメータは失われます。パラメータに加えて、クエリ文字列またはURLパスの一部を使用することもできますか？例/landing/instagramScraper/brandNameまたは/landing/instagramScraper?brandName=NAME。これは、ロケーション履歴に情報を保存するのに役立ち、その後、戻ることが機能します。他のオプションは、React SPAでのルーティングに役立つreact-routerを使用することで、状態を処理します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加