問題タブ [react-map-gl]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 入力フォーム コンポーネント オーバーレイを ReactMapGL コンポーネントに配置するには?
React アプリ開発は初めてです。react-map-glライブラリのReactMapGLクラスを使用する反応アプリを作成しようとしています。これにより、マップがレンダリングされます (Map コンポーネントを作成しました)。入力フォーム (SampleInputForm コンポーネントを作成) をこのマップのオーバーレイとしてページの右側に表示したいと考えています。フロントエンドの UI デザインに material-ui フレームワークを使用しています。以下はコードスニペットです:-
これにより、ページの下のマップボックス領域の外側にフォームが表示されます。Map コンポーネント内でSampleinputformを子コンポーネントとして使用すると、問題なく動作し、ページの右上にある mapbox の上にオーバーレイとして入力フォームが表示されます。以下にコード スニペットを示します。
Map コンポーネント内でフォームを渡す必要がないように、最初のコード スニペットに欠けているものは何ですか?
reactjs - 最初のボタン クリック後に React コンポーネントが更新されない
私のコードは、ユーザーが検索する値を入力できる入力フィールドを生成します。次に [送信] ボタンをクリックすると、displayMap が true になり、MapDisplay コンポーネントがレンダリングされると、Map コンポーネントを介して API 検索がトリガーされ、マップに表示される値が返されます。
問題は、このプロセスが一度しか機能しないことです。ボタンをもう一度クリックすると、何かが行われ、入力ボックスに新しい値が取得されていることを確認しましたが、マップを再度レンダリングする方法がわかりません。
this.setState に他の変数を設定して、コンポーネントを再度レンダリングする必要があることを認識させようとしましたが、何も機能しないため、何かが欠けていると思います。
私はReactにかなり慣れていないので、あなたが提供できる助けがあれば大歓迎です。
これは MainSearchBar.js で、上記のほとんどの作業が行われています。
これは MainSearchBar が呼び出されている場所です
必要な場合に備えて、これは Map コンポーネント自体です。
更新: 4/28、受け取った回答に従って、MainSearchBar.js のレンダリングを次のように更新します。