javascript - React LeafletJs Map 即使在状态更改时也不会重新渲染？

Question

因此，我正在创建一个 IP 地址跟踪器，其中我使用 API 来使用 IP 获取坐标，然后将这些坐标更新为相应的状态，但即使在更新状态时，地图也不会使用新坐标重新渲染，即使标记切换到新位置，但地图保持原样。我在互联网上搜索了对代码进行了多次编辑，但仍然没有发现任何问题，请帮助我。

import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import './styles/app.scss';

function App() {

  const [ip, setIP] = useState('132.154.30.217');
  const [data, setData] = useState({});
  const [load, setLoad] = useState(false);
  const [lng, setLng] = useState(-78.90869903564453);
  const [lat, setLat] = useState(35.056339263916016);

  function getData(event) {
    event.preventDefault();
    setLoad(true);
    fetch(`http://api.ipstack.com/${ip}?access_key=${process.env.REACT_APP_IPSTACK_ACCESS_TOKEN}`)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLat(data.latitude);
        setLng(data.longitude);
      });
    setLoad(false);
  }

  useEffect(() => {
    
  }, [data])

  return (
    <div className="app-container">
      <div className="upper-container">
        <h2 className='text-center text-white pt-5'>IP ADDRESS TRACKER</h2>
        <div className='search-bar mt-5'>
          <form onSubmit={getData} className='d-flex justify-content-center h-100 align-items-center'>
            <div>
              <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" onChange={event => setIP(event.target.value)} />
            </div>
            <button type="submit" class="btn btn-dark">{load ? <div class="spinner-border text-light" role="status">
              <span class="visually-hidden">Loading...</span>
            </div> : 'GO'}</button>
          </form>
        </div>
      </div>
      <div className='middle-container'>
        <div className='row data-slide shadow'>
          <div className='col'>{data.city}</div>
          <div className='col'>hhj</div>
          <div className='col'>kj</div>
          <div className='col'>kjhhj</div>
        </div>
      </div>
      <div className="lower-container bg-info">
        <MapContainer center={[lat, lng ]} zoom={18} scrollWheelZoom={true} className='map-container'>
          <TileLayer
            attribution='Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'
            url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
            id='mapbox/streets-v11'
            accessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
          />
          <Marker position={[lat, lng]}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    </div>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

谢谢你的相同:)

标签： javascriptreactjsleafletmapsreact-leaflet