如何使用需要获取的值初始化状态对象？

Question

我有一个带有 useState 的

user

对象集，我希望用初始

user.latitude

和

user.longitude

属性填充它。此信息来自自定义 Rails 后端，我基本上是在其中获取基于对用户 IP 地址进行地理编码的纬度和经度。

我的目标是渲染一张地图（通过 MapBox GL），立即设置到

user

所在的位置，这样我就可以为他们提供他们周围的某些位置（在本例中为

bars

）。

但是，我对如何执行此操作感到困惑，因为目前我正在使用空对象初始化

user

状态对象并填充地图的默认纬度/经度值。

这是我目前的组件流程：

function App() {
  const [user, setUser] = useState({});
  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    fetch('/me').then((response) => {
      if (response.ok) {
        response.json().then((user) => {
          console.log('within /me, the response is: ', user);
          onLogin(user);
        });
      } else {
        onLogout();
      }
    });
  }, []);

  //^ both for logging user in & updating values of LoggedIn & currentUser
  function onLogin(user) {
    setUser(user);
    setLoggedIn(true);
  }

  //^ to log the user out & also & updating values of LoggedIn & currentUser
  function onLogout() {
    setUser({});
    setLoggedIn(false);
  }

  return (
    <div>
      <Header user={user} loggedIn={loggedIn} onLogout={onLogout} />
      <Routes>
        <Route path='/' element={<Homepage user={user} />} />
        <Route path='/login' element={<Login onLogin={onLogin} />} />
        <Route path='/signup' element={<SignUp onLogin={onLogin} />} />
      </Routes>
    </div>
  );
}

export default App;

然后在

Homepage.js

中，我显示一个

<MapboxMap />

组件，其内容如下：

import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
import { useState, useRef, useEffect } from 'react';

mapboxgl.accessToken =
  'pk.eyJ1IjoibWFqYWxpanUiLCJhIjoiY2xmaDd3Zjk2MDIzaDNxcnhkZWlreG01eCJ9.Rm4z9DrJF16ukrO8qyWIbQ';

function MapboxMap({ user }) {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const [lat, setLat] = useState(42.35);
  const [lng, setLng] = useState(-70.9);
  const [zoom, setZoom] = useState(9);

  console.log('user within MapBox', user);

  useEffect(() => {
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat],
      zoom: zoom,
    });
  }, []);

  return (
    <div>
      <div ref={mapContainer} className='map-container' />
    </div>
  );
}

export default MapboxMap;

对于上述内容，由于我个人对 useRef 并不熟悉，因此我遵循了另一个教程中的 Mapbox 代码。但是，我在解决这个问题的最佳方法上遇到了瓶颈。我的中心目标是让

user

对象填充正确的纬度/经度数据。我不确定的是是否有可能在初始提取中完成它（即在初始化用户状态对象时填充这些值），或者是否有完全不同的方法来实现这种类型的目标。它可能使用不同的 React 钩子，或者我缺少的前端方面的东西。

我会采纳任何建议或朝着正确的方向迈出任何一步，因为我已经筋疲力尽了。提前谢谢你。