为什么this.props.param.match.id未定义，导致Express报错？答案

【问题标题】：Why is this.props.param.match.id undefined, resulting in Express error?为什么this.props.param.match.id未定义，导致Express报错？
【发布时间】：2020-03-28 16:14:29
【问题描述】：

我是 Express.js 的新手，正在尝试学习如何使用它，我正在尝试从 this.props.match.params 中获取一个 id 值，但它不存在。

我的特快路线是这样设置的：

//Edit Member
router.route('/edit/:id').get((req,res, next) => {
    memberSchema.findById(req.params.id, (error, data) => {
     if(error) {
         return next(error)
     } else {
         res.json(data)
     }
    })
})

页面网址是“http://localhost:3000/members/edit/5de6dad10844ae2fb875c0d1`

axios 请求如下：

 componentDidMount() {
    axios.get('http://localhost:4000/members/edit/' + this.props.match.params.id)
      .then(res => {
        this.setState({
          ign: res.data.ign,
          name: res.data.name,
          role: res.data.role
        });

      })
      .catch((error) => {
        console.log(error);
      })
  }

架构如下：

const Schema = mongoose.Schema;

let memberSchema = new Schema({
    ign: {
        type: String
    },
    name: {
        type: String
    },
    role: {
        type: String
    }
}, {
    collection: 'members'
})

module.exports = mongoose.model('Member', memberSchema)

当我点击一个成员进行编辑时，我得到了终端快速错误： Cast to ObjectId failed for value "undefined" at path "_id" for model "Member"

当我控制台日志this.props.params 我得到这个：

location: {pathname: "/members/edit/5de6dad10844ae2fb875c0d1", search: "", hash: "", state: undefined, key: "tysqtx"}
match:
isExact: false
params:
__proto__: Object
path: "/members/edit"
url: "/members/edit"
__proto__: Object
staticContext: undefined
__proto__: Object

但是，当我导航到 http://localhost:4000/members/edit/5de6dad10844ae2fb875c0d1 时，我可以直接在浏览器中从运行它的 Mongo 返回 json 数据。

点击该网址返回：

{"_id":"5de6dad10844ae2fb875c0d1","ign":"Test","name":"TestName","role":"Guest","__v":0}

我的 repo 位于 here，如果您想克隆它并帮助我弄清楚为什么无法通过 express 访问 ID 并了解更多上下文。我一直试图弄清楚这一点，但看不出有什么问题。如果这是一个重复的问题，任何帮助都非常感谢和抱歉，但我一直在寻找高低。

【问题讨论】：

那个 axios 请求在哪个文件中？您可能应该在问题中分享该文件的内容，而不是提供外部链接。
所以，嗯，我建议首先确保您实际上传递了一个 id。 console.log(this.props.match.params.id)，或检查网络选项卡以查看正在发出的实际请求。这应该排除服务器端逻辑或客户端逻辑，让您只关注其中一个。
看起来你在路由组件中没有指定url参数，在这种情况下:id，为什么不呢？ reacttraining.com/react-router/web/example/url-params 。 React 路由器在路由路径中查找特定语法以确定哪些 url 参数可用。
我的意思是在使用 React 路由 Route 组件的 React 应用程序的 App.js 中。路由没有指定 id 是一个 url 参数，因此 match props 将是未定义的。
@AlexanderStaroselsky 谢谢！这很简单，我知道它会是。它总是如此。我只是缺少 app.js 中的 id 参数。你真棒。你想正式回答这个问题以便我标记它吗？

标签： node.js reactjs mongodb express routes

【解决方案1】：

要在组件代码中使用 react-router-dom URL Parameters 属性值，您需要在 Route 组件 path 属性中指定它们。您需要将:id 附加到您的成员编辑路线以及您希望使用props.match.params.id 的任何其他路线：

变化：

<Route path="/members/edit" />

收件人：

<Route path="/members/edit/:id" />

它将在props.match.params 中公开一个名为id 的属性，您可以在组件代码中引用该属性。

看起来您删除了带有问题代码的临时存储库，所以这是从内存中获得的。

【讨论】：