无法读取未定义的属性 'map'，TypeError

Question

我正在尝试让我的 React 地图应用程序引用我的 mongodb 的另一个集合。 Sessions 函数可以很好地显示标记，但是当我尝试同时显示它们时，会发生错误。我正在尝试使用与显示来自另一个数据库集合的数据相同的格式：

         {this.state.Sessions.map(UsersSession => (
           <Marker
                   position={[UsersSession.latitude, UsersSession.longitude]}
                   icon={myIcon} >
              <Popup>
              <em>{UsersSession.event}, </em>
                  {UsersSession.venue} {'\n'}

                  <Button color="primary" size="sm">More info</Button>
                  <Chart/>
              </Popup>
           </Marker>
         ))}

         {this.state.members.map(Users => (
           <Marker
                   position={[Users.location.latitude, Users.location.longitude]}
                   icon={myIcon} >
              <Popup>
              <em>{Users.name}, </em>
                  {Users.bio} {'\n'}

                  <Button color="primary" size="sm">More info</Button>
                  <Chart/>
              </Popup>
           </Marker>
         ))}
       </Map>

这导致错误：

TypeError: Cannot read property 'map' of undefined

即使我定义了我的类名。它可能与我的模式有关吗？或者是我的 JSX 代码中的问题。

我的 members.js 文件（服务器端）：

<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>

const express = require('express');
const Joi = require("joi");

const db = require('../db');
const members = db.get('members');

//Defining the schema for the backend.
const schema1 = Joi.object().keys({
    name:   Joi.string().min(1).max(100).required(),
    bio:   Joi.string().min(1).max(500).required(),
    latitude:    Joi.number().required(),
    longitude:   Joi.number().required()
});

const router = express.Router();

//Gets all sessions that are found within the DB.
router.get('/', (req, res) => {
  members
  .find()
  .then(allmembers =>{
      res.json(all);
    });
});
//POST for when no errors are produced.
router.post('/', (req, res, next) => {
  const result = Joi.validate(req.body, schema);
  if (result.error == null) {
//Removes the need to write eg) req.body.name below.
    const {name,bio, latitude, longitude,} = req.body;
    const members = {
      name,
      bio,
      latitude,
      longitude,
      date: new Date()
     };
   members.insert(members).then(insertedMessage => {
         res.json(insertedMessage);
   });
 }
else {
  next(result.error);
   }
});

module.exports = router;

Answer 1

在网络请求完成之前，您的状态很可能没有 Sessions 或 members 数组。您可以添加空数组的默认值来解决这个问题。

class App extends React.Component {
  state = {
    Sessions: [],
    members: []
  };

  // ...
}

Answer 2

您也可以运行只有当会话或成员存在时才可以使用地图功能。为此，您可以执行以下检查：

{this.state.Sessions && this.state.Sessions.map(UsersSession ....... rest of the logic}

无法读取未定义的属性 'map'，TypeError

Cannot read property 'map' of undefined, TypeError

leaflet

reactjs

react-leaflet

无法读取未定义的 属性 'map'，TypeError

Cannot read property 'map' of undefined, TypeError

leaflet

reactjs

react-leaflet

无法读取未定义的属性 'map'，TypeError