Redux mapStateToProps не работает на моей карте mapbox

Question

Я изо всех сил пытаюсь вытащить пользовательские данные из моего состояния Redux в мой компонент mapbox.

Я просто хочу отобразить текущую информацию о пользователе на карте, однако я постоянно получаю эту ошибку:

. / Src / app / views / map / BasicMap.jsx Строка 293: 22: «пользователь» не определен no-undef

Вот код из моего файла BasicMap.jsx:

// Trying to get user info from redux store
import { connect } from "react-redux";


const BasicMap = () => {

  // Use redux store to get user info

  const mapState = (state) => ({
    user: state.USER_SET_DATA.user.displayName,
  });
  
  
  
  return (
    <ReactMapGL
      {...viewport}
      mapStyle="mapbox://styles/veleter/ck7xdy1yo1bkj1ipmsbhe9c96"
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      onViewportChange={setViewport}
      onClick={addMarker}
    >
    
    
                <Popup
              key={userMarker.id + Math.random}
              latitude={userMarker.lat}
              longitude={userMarker.long}
              closeButton={true}
              closeOnClick={false}
              dynamicPosition={true}
              onClose={() =>
                setShowUserPopup({
                  ...showUserPopup,
                  [userMarker.id]: false,
                })
              }
              anchor="top"
            >
              <div className="popup">
                <h1>{user}</h1>
                <LogEntryForm location={userMarker} />
              </div>
            </Popup>

Я удалил часть кода, который вам не нужен. Я также попробовал:

  const mapState = (state) => ({
    user: state.user,
  });

Существует инструмент для избыточности, и USER_SET_DATA передает информацию о пользователе.

Как я могу получить доступ к данным пользователя из штата и использовать их в H1 в моем приложении карты? "mapState объявлен, но никогда не читается"

Спасибо за любую помощь!

Answer 1

Должно быть так:

const BasicMap = ({ user }) => {
  ...
}

const mapState = (state) => ({
   user: state.user 
});

export default connect(mapState)(BasicMap)