問題タブ [react-google-maps]

グローバルに定義された配列 salesPropertyInfoWindowOut を割り当てることにより、 salesPropertyInfoWindowIn の状態を変更しようとしています。

の初期値

onMarkerClick メソッドは、パラメーターとして渡された index の値を変更し、その値を salesPropertyInfoWindowIn に割り当てます。ただし、これはマップを再レンダリングしません。いくつかの解決策を提案して助けてください。

マップ上に複数のマーカーがありますが、マーカーをクリックして情報ウィンドウを取得するたびに、すべてのマーカー情報ウィンドウが開きます!

問題が何であるかがわかります。もともと、どのウィンドウをロードするかを伝えていませんでした。インデックスを渡そうとしましたが、これはうまくいきません。

これは私が現在持っているものです：

私はjsonファイルからいくつかのデータを取得しており、.mapでそれらのポイントをreactjsのGoogleマップに配置していますが、すべて問題ありません。ただし、オブジェクト内の一部のアイテムには値がなく、それらが呼び出されると、「TypeError: null のプロパティ 'category' を読み取れません」がスローされます。リターンで次のようなことができるはずではありませんか:

私は Reacts の状態について頭を悩ませようとしていますが、これが予想される動作であるかどうか疑問に思っています。

フォームがあり、フォーム送信時に関数をトリガーします。この関数は住所を取得し、それを緯度と経度に変換し、マップのマーカー位置を取得する json フェッチ呼び出しに吐き出します。

私が気づいたのは、フォーム送信のレンダリングでマーカーをconsole.logに記録すると、最初に古いオブジェクトがログに記録され、次に取得した新しいオブジェクトがログに記録され、フォーム送信を行うたびにこれが行われます。これは正常ですか？関数内で console.log を実行すると、古い状態しか取得できません。

これは私のコードです: http://pastiebin.com/embed/5a8da508b22c8

更新: ペーストビンではなくサイトにコードを追加:

Google マップ API を使用して React を実装するためのオンライン チュートリアルに従っています。マップ コンポーネントを構築しようとしてきましたが、配信されたとおりに指示に従いました。しかし、ブラウザでページを読み込もうとすると、何も表示されず、解決に苦労しているコンソール エラーがいくつかあります。

以下は私の単純なHTMLページです

ここに私のapp.jsファイルがあります

以下は、問題を引き起こしていると思われる Map.js ファイルです。

これは、JSX コードを ES2015 に変換する webpack.config.js ファイルです。

これは、私のhtmlページにリンクされているbundle.jsコードを含むフィドルです。

bundle.js コードを含むフィドル

ブラウザで開こうとすると、次のコンソール エラーが表示されます

警告: React.createElement: タイプが無効です -- 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、未定義です。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れている可能性があります。または、デフォルトのインポートと名前付きインポートを混同している可能性があります。

のレンダリング方法を確認してくださいMap。in Map (App によって作成された) in div (App によって作成された) in div (App によって作成された) in App invariant.js:49 Uncaught Error: Element type is invalid: expected a string (組み込みコンポーネントの場合) または a class/ function (複合コンポーネントの場合) >but got: undefined. コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れている可能性があります。または、デフォルトのインポートと名前付きインポートを混同している可能性があります。

のレンダリング方法を確認してくださいMap。invariant (invariant.js:42) で createFiberFromElement (react-dom.development.js:5753) で reconcileSingleElement (react-dom.development.js:7531) で reconcileChildFibers (react-dom.development.js:7635) で reconcileChildrenAtExpirationTime (react-dom.development.js:7756) reconcileChildren (react-dom.development.js:7747) で finishClassComponent (react-dom.development.js:7881) で updateClassComponent (react-dom.development.js:7850) beginWork (react-dom.development.js:8225) at performUnitOfWork (react-dom.development.js:10224) react-dom.development.js:9747 コンポーネントで上記のエラーが発生しました: マップ内 (アプリで作成) in div (アプリで作成) in div (アプリで作成) in アプリ

react-dom.development.js:10994 キャッチされないエラー: 要素の型が無効です: 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、未定義です。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れている可能性があります。または、デフォルトのインポートと名前付きのインポートを混同している可能性があります。

のレンダリング方法を確認してくださいMap。invariant (invariant.js:42) で createFiberFromElement (react-dom.development.js:5753) で reconcileSingleElement (react-dom.development.js:7531) で reconcileChildFibers (react-dom.development.js:7635) で reconcileChildrenAtExpirationTime (react-dom.development.js:7756) reconcileChildren (react-dom.development.js:7747) で finishClassComponent (react-dom.development.js:7881) で updateClassComponent (react-dom.development.js:7850) beginWork (react-dom.development.js:8225) で performUnitOfWork (react-dom.development.js:10224) で

問題は GoogleMapLoader にあると思っていたので、react-google-maps-loader のインポートを追加しましたが、明らかにそうではありませんでした。また、Webstorm には JSX を ES2015 コードに変換する際に問題があると読んだので、Webstorm の使用から Sublime Text に切り替えましたが、それも問題ではありませんでした。足りないものはありますか？

react-google-maps パッケージを使用して、マーカーの場所の住所を表示する情報ウィンドウを持つドラッグ可能なマーカーで地図を表示しようとしています。

今のところ動作し、住所を取得して表示できますが、実際にはマーカー情報ウィンドウのみを再レンダリングする必要があるのに、マップ全体を再レンダリングするという問題に遭遇しました。

これはおそらく、マップ コンポーネントの状態に格納されている、handleOriginMarkerChange() で originaddress と座標を設定するときに、マップ コンポーネントの状態を変更しているためです。私は反応するのが初めてで、これを解決する適切な方法がわからないので、正しい方向を指していると役に立ちます!

以下は私のMap.jsのコードです