質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

React+ReduxでLaravel APIを叩いたときのレスポンスの表示でエラー

削除済ユーザー
削除済ユーザー

総合スコア0

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

2回答

0評価

0クリップ

59閲覧

投稿2019/10/21 18:48

編集2022/01/12 10:58

前提・実現したいこと

現在、Reactでパラメータと一緒にLaravel APIを叩き、Laravel側は更にそのパラメータをつかって外部(ホットペッパーグルメ)のAPIを叩き、その結果をReact側に返す機能を実装中です。一度Laravelを噛ませる理由はCORS回避の為です。
パラメータに関してはリクエストを送る前のページで確定されています。
試しに、Postmanでリクエストを送ったところ下記のようにレスポンスは返ってきます。
Postman
しかし、下記のようにレスポンスをJSON.parse()を使ってオブジェクトに変換し、console.log()してみても
イメージ説明
イメージ説明
…の様にエラーが表示されます。

Postmanで送ったところ正しいレスポンスが返ってきていることから、恐らく、リクエストが意図した通りに送られていないのでレスポンスも正しく返ってきていない、もしくは私のJSON.parse()に対する理解が及んでいないかのどれかだと思い、コードを書き直してはいますが一向に解決致しません。
どなたか解決方法のご教授お願い致します。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'results' of undefined at app.js:120993

該当のソースコード

JavaScript

/*** リクエストファイル ***/ class Result extends React.Component { constructor(props) { super(props) this.state = { lat: '', lng: '' } } componentDidMount() { // Get user current position navigator.geolocation.getCurrentPosition((position) => { this.setState({ lat: position.coords.latitude, lng: position.coords.longitude }) const lat = position.coords.latitude const lng = position.coords.longitude console.log(position.coords) const httpURL = 'http://localhost:8000/api/gourmet?range=3&order=4' this.props.actions.httpRequest() const res = axios.get(`${httpURL}&lat=${lat}&lng=${lng}&party_capacity=${this.props.QuestionsReducer.people}&budget=${this.props.QuestionsReducer.budget}&free_food=${this.props.AmountReducer.freeFood}&free_drink=${this.props.AmountReducer.freeDrink}&genre=${this.props.QuestionsReducer.genre}`) this.props.actions.httpSuccess() console.log(JSON.parse(res.data.results)) }, (err) => { this.props.actions.httpFailure() console.log(err) }) } render() { const { classes } = this.props return ( <div className={classes.root}> <div className={classes.toolbar} /> <h1>周辺のお店</h1> {/* TODO: Modify Google Maps layout */} <Map style={mapStyle} google={this.props.google} zoom={14} center={{ lat: this.state.lat, lng: this.state.lng }} initialCenter={{ lat: this.state.lat, lng: this.state.lng }} > <Marker title={'現在地'} position={{ lat: this.state.lat, lng: this.state.lng }} /> </Map> <h1>aaaaaaaaaa</h1> </div> ) } } const mapStateToProps = state => ({ QuestionsReducer: state.QuestionsReducer, AmountReducer: state.AmountReducer, HttpReducer: state.HttpReducer }) const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(actions, dispatch) }) const styledResult = withStyles(styles, { withTheme: true })(Result) const wrappedStyledResult = GoogleApiWrapper({ apiKey: ('AIzaSyDXmfufz94HbjCTfGwUBF4TCIwJ2_j-KW8') })(styledResult) export default connect(mapStateToProps, mapDispatchToProps)(wrappedStyledResult)

PHP

/*** api.php ***/ Route::get('/gourmet', 'GetGourmetController@gourmet')->name('api.jwt.gourmet');

PHP

/*** GetGourmetController.php ***/ <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use GuzzleHttp\Client; class GetGourmetController extends Controller { public function gourmet(Request $req) { $lat = $req->lat; $lng = $req->lng; $partyCapacity = $req->party_capacity; $budget = $req->budget; $freeFood = $req->free_food; $freeDrink = $req->free_drink; $genre = $req->genre; $param = "?key=*****&format=json&range=3&order=4&lat=$lat&lng=$lng&party_capacity=$partyCapacity&budget=$budget&free_food=$freeFood&free_drink=$freeDrink&genre=$genre"; $client = new Client([ // Base URI is used with relative requests 'base_uri' => 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1', // You can set any number of default request options. 'timeout' => 2.0, ]); $res = $client->request('GET', $param)->getBody(); return $res; } }

試したこと

QuestionsReducer、AmountReducer内のstateはconsole.log()で確認したところ、しっかり格納されていました。
lat,lngも同様です。

補足情報(FW/ツールのバージョンなど)

Laravel 5.8.*

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。