如何在React/Next.js中簡單地將資料從一個頁面的組件傳遞到另一個頁面上的組件？-有解無憂

總結

我有一個簡單的 next.js 應用程式，有兩個頁面，index.js 和 results.js。索引頁面有兩個位置自動完成欄位，用戶從推薦位置的下拉串列中選擇位置后，這些欄位會回傳位置的地址和緯度。回傳后，此資料將存盤在markers索引頁上呼叫的變數中。當用戶單擊索引頁面上的“獲取結果”按鈕時，我嘗試將地址和 LatLng 資料傳遞到結果頁面，以便可以將所選位置顯示為地圖上的標記。

問題

我已經嘗試斷斷續續地執行此操作大約一個星期了，但我不知道如何實作我想要的。我覺得應該有一個超級簡單的方法來做到這一點，但我就是想不通。我試過這樣的事情：

在按鈕單擊時傳遞資料徹底請求引數，但鏈接是根據頁面呈現時的變數值生成的，而不是在變數更新時更新
將地圖與位置自動完成在同一頁面上并嘗試使用狀態自動重新加載地圖，這對我來說似乎根本不起作用
我也研究過 Redux 但這似乎太復雜了，無法簡單地將物件/它的資料從一個頁面傳遞到另一個頁面

我的理想解決方案是將資料從 indext 傳遞到結果的簡單方法。可能還值得指出的是，我是 React/Next.js 的新手，所以我可能會以錯誤的方式處理所有這些，一旦它起作用，我還將添加一個 API 呼叫以獲取兩者之間的方向兩個 LatLng 點也將顯示在結果頁面的地圖上。

代碼

index.js（簡化）

{/* Import used next and style objects */ }
import Head from 'next/head'
import styles from '../styles/Home.module.css'

{/* Import react-bootstrap */ }
import { Container, Row, Col } from 'react-bootstrap'

{/* Import geosuggest */ }
import Geosuggest from 'react-geosuggest'

{/* Import used components */ }
import NavigationBar from '../components/NavigationBar'
import Footer from '../components/Footer'

{/* Import and use runtime vars for Google API */ }
import getConfig from "next/config"
const { publicRuntimeConfig } = getConfig()
const GoogleApiUrl = `https://maps.googleapis.com/maps/api/js?key=${publicRuntimeConfig.MAPS_JAVASCRIPT_API_KEY}&libraries=places`

export default function Home() {

  const markers = {
    from: {description: "", lat: 0, lng: 0},
    to: {description: "", lat: 0, lng: 0}
  }

  const onFromSuggestSelect = (suggest) => {
    console.log("New FROM location selected: \""   suggest.description   "\"");
    markers.from.description = suggest.description
    markers.from.lat = suggest.location.lat
    markers.from.lng = suggest.location.lng
  }

  const onToSuggestSelect = (suggest) => {
    console.log("New TO location selected: \""   suggest.description   "\"");
    markers.to.description = suggest.description
    markers.to.lat = suggest.location.lat
    markers.to.lng = suggest.location.lng
  }

  return (
    <div>
      <Head>
        <title>MyApp</title>
        <meta name="description" content="MyApp" />
        <link rel="icon" href="/favicon.ico" />
        <script src={GoogleApiUrl}></script>
      </Head>

      <NavigationBar/>

      <div className={styles.container}>
        <main>
          <Container>
            <Row className="text-center">
              <Col md={1}></Col>
              <Col md={5}><Geosuggest data-test-id="autocomplete-start-test" placeholder="From..." onSuggestSelect={onFromSuggestSelect} country="gb"  minLength="3" /></Col>
              <Col md={5}><Geosuggest data-test-id="autocomplete-end-test" placeholder="To..." onSuggestSelect={onToSuggestSelect} country="gb"  minLength="3" /></Col>
              <Col md={1}></Col>
            </Row>
          </Container>
        </main>

        <Footer/>

      </div>
    </div>
  )
}

results.js（簡化）

{/* Import used next and style objects */ }
import Head from 'next/head'
import styles from '../styles/Home.module.css'

{/* Import used react-bootstrap objects */ }
import { Container } from 'react-bootstrap'

{/* Import used components */ }
import NavigationBar from '../components/NavigationBar'
import Footer from '../components/Footer'
import Map from '../components/Map'

{/* Import and use runtime vars for Google API */ }
import getConfig from "next/config"
const { publicRuntimeConfig } = getConfig()
const GoogleApiUrl = `https://maps.googleapis.com/maps/api/js?key=${publicRuntimeConfig.MAPS_JAVASCRIPT_API_KEY}&libraries=places`

export default function Home() {

    const markers = {
        from: {description: "", lat: 0, lng: 0},
        to: {description: "", lat: 0, lng: 0}
      }

  return (
    <div>
      <Head>
        <title>MyApp</title>
        <meta name="description" content="MyApp" />
        <link rel="icon" href="/favicon.ico" />
        <script src={GoogleApiUrl}></script>
      </Head>

      <NavigationBar/>

      <div className={styles.container}>
        <main>
            <Container>
                {/* MARKERS NEEDS TO BE PASSED IN ON THE LINE BELOW */}
                <Map markers={markers}/> 
            </Container>
        </main>
      </div>
      
      <Footer/>

    </div>
  )
}

Map.js（組件）

import React from "react"
import { GoogleMap, Marker } from "@react-google-maps/api"

export default class Map extends React.Component {
    render() {
        // Set the map to fill its container
        const containerStyle = { width: '500px', height: '500px' }
          
        // Set the map to show the entire UK on initial load
        const center = { lat: 54.476422, lng: -3.397340 }
        const zoom = 6

        // Return the map with the above defaults
        return(
            <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={zoom}>
                <Marker position={{ lat: this.props.markers.from.lat, lng: this.props.markers.from.lng }} />
                <Marker position={{ lat: this.props.markers.to.lat, lng: this.props.markers.to.lng }} />
            </GoogleMap>
        )
    }
}

uj5u.com熱心網友回復：

我認為這里有兩個問題：

如何在兩個 NextJS 頁面之間傳遞資料？
為什么當suggest值更新時我的鏈接沒有更新？

有幾種不同的方法可以在頁面之間傳遞資料，但查詢字串引數可能是我會使用的方法。盡管如果可能，我不會在查詢字串中使用描述。你可以通過使用NextJS組件來做到這一點<Link />

但是，您似乎已經嘗試過類似的操作并且鏈接沒有更新。原因在于markers資料是如何設定的。您已將其設定為組件中的常量，它告訴 React 不要監視對此物件的更改。當onFromSuggestSelect火災，它更新物件屬性，然后什么都沒有。React 認為<Link />Parent 中沒有任何變化，因此無法對其進行任何更改。

這就是我們擁有 React State 的原因。如果您將markersconst更改為使用useState鉤子，您應該會發現實作<link />的值會在值更改時更新。

一句警告；如果您之前沒有使用過useState鉤子，請仔細閱讀檔案，以便您了解如何正確實作它。

我希望這能解決你的問題。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/398184.html

標籤：javascript 反应下一个.js 反应谷歌地图

上一篇：Nextjs如何避免在路由頁面之間重新渲染公共組件？

下一篇：在React的模態內打開新模型