javascript - Redux mapStateToProps 在我的 Mapbox map 中不起作用

Question

我正在努力将用户数据从 Redux 状态中提取到我的 Mapbox 组件中。

我只想在 map 中显示当前用户信息，但我一直收到此错误:

./src/app/views/map/BasicMap.jsx 第 293:22 行:'user' 未定义 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,
  });

有redux工具，USER_SET_DATA正在传递用户信息。

如何从州访问用户数据并在 map 应用程序的 H1 中使用它？ “mapState 已声明但从未读取”

感谢您的帮助!

Answer 1

应该是这样的:

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

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

export default connect(mapState)(BasicMap)