Question

我是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)
     }
    })
})

页面URL为“ 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数据。

点击该URL返回：

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

如果您想克隆我的存储库，here可以帮助我弄清楚为什么无法通过express和更多上下文访问ID。我已经尝试了好一阵子了，但是看不出有什么问题。非常感谢您的帮助，如果这是一个重复的问题，对不起，但是我一直在寻找高空。

Answer 1

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

更改：

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

收件人：

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

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

您似乎删除了带有问题代码的临时存储库，所以这是从内存中获取的。

希望有帮助！

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

1 个答案: