首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么"this.props.match.params.authorName“在ReactJS中给出未定义的/空值

为什么"this.props.match.params.authorName“在ReactJS中给出未定义的/空值
EN

Stack Overflow用户
提问于 2019-06-03 00:19:34
回答 1查看 64关注 0票数 1

我正在尝试获取发送的查询参数authorName,这样我就可以获取该值并搜索MongoDB

我通过另一个名为Authors的组件调用FilterBooks组件

这是我的Authors.jsx

import React, {Component} from 'react';
import axios from 'axios';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import FilterBooks from './filter-books'

const SelectOption = (props) => (
        <option value={props.author.firstName}>{`${props.author.firstName} ${props.author.lastName}`}</option>
)

export default class Authors extends Component{

    constructor(props){
        super(props);
        this.state = {
            authorArray: [],
            authorName: ''
        }
        this.onChange = this.onChange.bind(this);
    }

    componentDidMount(){
        axios.get('http://localhost:4000/books/authors')
        .then(res => {
            this.setState({
                authorArray: res.data
            });
        });
    }


    getAuthors(){
        return this.state.authorArray.map((currentAuthor, id) => {
            return <SelectOption author={currentAuthor} key={id} />
        });
    }

    onChange(e){
        this.setState({
            authorName: e.target.value
        });

    }


    render(){
        return(
            <Router>
            <div className="container">
                <h3>Authors List</h3>

                <div className="row">
                    <div className="col-md-12 text-center">
                    <select
                    value={this.state.authorName}
                    onChange={this.onChange}
                    className="form-control" id="authors" name="authors">
                        <option>- Author List -</option>
                        {this.getAuthors()}
                    </select>
                    <br />
                    {/* <Link  to={`/authors/${this.state.authorName}`} className="btn btn-success" >View Books</Link> */}
                    <Link  to={`/authors/${this.state.authorName}`} className="btn btn-success" >View Books</Link>
                    </div>
                </div>

            </div>
            {/* <Route path={`/authors/${this.state.authorName}`} exact Component={FilterBooks} /> */}
            <Route path={`/authors/${this.state.authorName}`} component={FilterBooks}/>
            </Router>
        );
    }
}

这是我的FilterBook.jsx

import React, {Component} from 'react'
import axios from 'axios';

export default class FilterBooks extends Component{

    constructor(props){
        super(props);
    }

    componentDidMount(){
        axios.get("http://localhost:4000/books/authors/" + this.props.match.params.authorName)
        .then(res => {
            console.log(res.data);
        }).catch(err => {
            console.log(err);
        });
    }

    render(){
        return(
            <div>
                <h1>Hello Books</h1>
            </div>
        );
    }
}

这是我的server.js,它处理后端。在这里,我删除了其他端点,所以这段代码看起来短小精悍、清晰明了。

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');

const BookDB = require('./book-dbmodel');
const AuthorDB = require('./author-dbmodel');

const app = express();
const router = express.Router();

app.use(bodyParser.json());
app.use(cors());
app.use('/books', router);

//connect to books database
mongoose.connect('mongodb://127.0.0.1:27017/books', {useNewUrlParser: true});

const connection = mongoose.connection;
connection.once('open', () => {
    console.log("Connected to MongoDB via port 27017");
});

app.listen(4000, () => {
    console.log('Listening to port 4000');
});


//get books by author name http://localhost:4000/books/authors/authorName
router.route('/authors/:authorName').get((req, res) => {
    let authorName = req.params.authorName;
    BookDB.find({firstName: {$regex: `${authorName}`, $options: "i"}}, (err, books) => {
        if(err) throw err;
        res.status(200).send(books);
    });
});

但这是我的输出,这是一个空输出:

有人能帮帮我吗?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56416789

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档