Question

所以我的问题是，我基本上是想传递我从主页上的API提取的数据，然后按提交按钮将其提取并存储在'geo'变量中，然后将其传递到地图页面（在提交邮政编码后，通过按“地图”按钮访问），然后该页面将使用“ geo”（geo.result.latitude / longitude）中的纬度和经度在加载并显示该数据时从另一个API获取在页面上。但是，我在理解如何使用钩子在两个组件/页面（主页和地图）之间传递状态（或geo变量中的值）时遇到问题。我是React的新手，也是Hooks的新手，所以目前我的理解非常基础。任何帮助将不胜感激：）

Home.js

import React, { useState, useEffect, useCallback } from 'react'
import { Link } from 'react-router-dom'

const Home = () => {

  const [postCode, setPostcode] = useState({

    pCode: ''

  })

  const [geo, setGeo] = useState([])

  const fetchRequest = useCallback((e) => {
    e.preventDefault()
    fetch(`https://api.postcodes.io/postcodes/${postCode.pCode}`)

      .then(res => res.json())
      .then(res => setGeo(res))

    console.log(geo)

  }, [{ ...postCode }])

  const handleChange = (e) => {
    setPostcode({ ...postCode, pCode: e.target.value })
    console.log(postCode)

  }

  return <section >

    <div className='container'>

      <form className="form" onSubmit={fetchRequest}>
        <input className="input" type="text" placeholder="Text input" onChange={handleChange} />
        < button>submit</button>
        <Link className='button' to={{
          pathname: '/maps'
        }}>Map

        </Link>
      </form>

    </div>

  </section>

}

export default Home

Maps.js

const Maps = () => {

  const [events, setEvents] = useState([])

  const fetchRequest = useCallback(() => {

    fetch(`https://api.list.co.uk/v1/events?near=${viewport.latitude},${viewport.longitude}/10`, {
      headers: {
        'Authorization': `Bearer ${API_KEY}`
      }
    })
      .then(res => res.json())
      .then(res => setEvents(res))


  }, [{ ...viewport }])

  useEffect(() => {

    fetch(`https://api.list.co.uk/v1/events?near=${geo.result.latitude},${geo.result.longitude}/10`, {
      headers: {
        'Authorization': `Bearer ${API_KEY}`
      }
    })
      .then(res => res.json())
      .then(res => setEvents(res))

    return () => console.log('Unmounting component')

  }, [])

  const [viewport, setViewport] = useState({
    width: '100vw',
    height: '100vh',
    latitude: 51.45523,
    longitude: -2.59665,
    zoom: 13.5

  })

  if (events.length === 0) {
    return <div>Loading...</div>
  }

  return <div>
    <ReactMapGL mapboxApiAccessToken={TOKEN}
      mapStyle="mapbox://styles/dredizzle/ck3owxclr138a1cqnzupab2hc"
      {...viewport}
      onViewportChange={viewport => {
        setViewport(viewport)
      }}
      onClick={
        fetchRequest
      }

    >

      {events.map(event => (
        <Popup
          key={event.event_id}
          latitude={event.schedules[0].place.lat}
          longitude={event.schedules[0].place.lng}
        >
        </Popup>
      ))}


      {/* <Popup latitude={51.45523} longitude={-2.59665}>
        <div>event here</div>
      </Popup> */}
      <GeolocateControl
        positionOptions={{ enableHighAccuracy: true }}
        trackUserLocation={false}
      />
    </ReactMapGL>
  </div>
}

export default Maps

Answer 1

在Google地图组件中，我认为当您重复以下行时，您正在覆盖events的值：

const [events, setEvents] = useState([])

您应该只能够在Maps组件中引用this.state.events，并在Maps中使用this.setState()从组件内部将数据添加到events数组中。

使用React Hooks在两个单独的组件之间传递状态的问题

1 个答案: