javascript - 为什么“this.props.match.params.authorName”在 ReactJS 中给出未定义/空值
问题描述
我正在尝试获取authorName
发送的查询参数,因此我可以获取该值并进行搜索MongoDB
我正在FilterBooks
通过另一个名为的组件调用组件Authors
这是我的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);
});
});
但这是我的输出,它是一个空输出:
有人可以帮帮我吗?
解决方案
要使 URL 路径的一部分成为参数,您应该像这样定义它
<Route path='/authors/:authorName' component={FilterBooks}/>
然后你可以在你的组件中访问它
this.props.match.params.authorName
推荐阅读
- git - docker-compose 不能使用 git 子模块
- java - 健康检查后端只有 spring-boot 应用程序(消息处理应用程序)
- javascript - 如何在fabric js中获取背景图像属性
- java - 如何验证序数日期?
- google-sheets - 谷歌表格过滤器中的附加自定义列
- svn - 本地文件结构在 SVN 上应该如何?
- javascript - 如何记住启用了机器人的频道
- python - DateTime - 根据行中的日期范围将每月数据扩展到每日
- terraform-provider-aws - 安装 hashcorp/aw 时出错:提供程序注册表 registry.terraform.io 没有名为 registry.terraform.io/hashicorp/aw 的提供程序
- reactjs - React 组件未检测到 redux 状态的变化