Question

我正在开发Web应用程序的前端和后端。为此，我使用了mongo，express，reactjs和node技术。我开发了用于获取，发布，删除的API，并通过postmon对其进行了测试。有用！但是，当我将其连接到前端时，我的get方法无法正常工作。此get方法意味着获取特定对象。

这是我的api get方法，

// get a book by id
book_route.route('/:id').get(function (req, res) {
    let id = req.params.id;
    Book.findById(id, function (err, book){
        if(err){
            console.log(err);
        }
        else {
            res.json(book);
        }
    });
});

请注意，此操作是通过postmon进行的，例如，此操作检索了一个具有其ID的对象。

http://localhost:4000/book/5cbcc159e4db244de040e854

它检索了以下JSON对象。

{
    "_id": "5cbcc159e4db244de040e854",
    "title": "Miracles from heaven",
    "isbn_no": "439564969",
    "author": "Jense Bend",
    "published_year": 2015,
    "no_of_copies": 34,
    "public_or_rare": "",
    "__v": 0
}

我想将以上JSON对象值加载到表单元素中。所以我在前端做了如下尝试，

  componentDidMount() {

        axios.get('http://localhost:4000/book/'+this.props.match.params.id)
        //axios.get('http://localhost:4000/book/5cbcc159e4db244de040e854')
            .then(response => {
               // console.log(this.props.match.params.id);
                this.setState({
                    title: response.data.title,
                    isbn_no: response.data.isbn_no,
                    author: response.data.author,
                    published_year: response.data.published_year,
                    no_of_copies: response.data.no_of_copies,
                    public_or_rare: response.data.public_or_rare
                 });
            })
            .catch(function (error) {
                console.log(error);
            })
    }

注意，要对此进行检查，我注释第一行，并取消注释axios.get('http://localhost:4000/book/5cbcc159e4db244de040e854')此行。它显示具有值的表单元素。

但是此行不起作用，axios.get('http://localhost:4000/book/'+this.props.match.params.id)

最后，我想将值加载到表单中。我在前端编码了其他onchange函数。注意，当我启用此行axios.get('http://localhost:4000/book/5cbcc159e4db244de040e854')

时，这些图像已正确显示

这里有什么问题吗，请大家帮我解决这个问题。

如何通过'this.props.match.params.id'

0 个答案: