Javascript 如何在React中使用道具来操作参数?
我是新开发人员,我开发了一个关于数据库的表,前端是ReactJS,后端是NodeJS,MySQL 当我单击“操作”列上的“查看”按钮时,我希望如下所示: 我的路由器:Javascript 如何在React中使用道具来操作参数?,javascript,reactjs,parameters,react-props,react-proptypes,Javascript,Reactjs,Parameters,React Props,React Proptypes,我是新开发人员,我开发了一个关于数据库的表,前端是ReactJS,后端是NodeJS,MySQL 当我单击“操作”列上的“查看”按钮时,我希望如下所示: 我的路由器: exports.viewclient = function(req, res) { var Code = req.query.Code; console.log(req.params); connection.query('SELECT Code, Prenom, Nom, FAX, Telephone,
exports.viewclient = function(req, res) {
var Code = req.query.Code;
console.log(req.params);
connection.query('SELECT Code, Prenom, Nom, FAX, Telephone, Email, Adresse1, Adresse2 FROM clients WHERE Code = ?',[req.params.Code], function(error, results, fields) {
if (error) throw error;
res.send(JSON.stringify(results));
console.log(results);
});
}
我的服务器:
exports.viewclient = function(req, res) {
var Code = req.query.Code;
console.log(req.params);
connection.query('SELECT Code, Prenom, Nom, FAX, Telephone, Email, Adresse1, Adresse2 FROM clients WHERE Code = ?',[req.params.Code], function(error, results, fields) {
if (error) throw error;
res.send(JSON.stringify(results));
console.log(results);
});
}
router.get('/viewclient/:code',clients.viewclient)代码>
类列表上的MyhandleView方法:
constructor(props) {
super(props);
this.state = {
clients: [],
Code: this.props.match.params.Code
};
handleView(Code) {
try {
console.log("Voir client")
this.props.history.push('/clients/viewclient/' + Code);
}
catch (error) {
this.setState({ error });
}
}
查看类:
constructor(props) {
super(props);
this.state = {
clients: [],
Code: this.props.match.params.Code
};
console.log(this.props);
componentDidMount() {
axios.get('http://localhost:4000/app/viewclient/' + this.state.Code)
.then(response => {
if (response && response.data) {
this.setState({ clients: response.data });
}
})
.catch(error => console.log(error));
}
当我用Postmanhttp://localhost:4000/app/viewclient/1111
它返回
[{"Code":1111,"Prenom":"test","Nom":"test","FAX":"58985688888","Telephone":"58985699888","Email":"test@gmail.com","Adresse1":"","Adresse2":""}]
但当我运行前端时,它会将我重定向到http://localhost:3000/app/viewclient/undefined
并且我无法查看Select的结果
console.log(this.props)的结果是:
请问我该怎么修 我相信你可以做两件事中的一件来解决你的问题
与其使用this.state.code
,为什么不在axios请求中简单地使用this.props.match.params.code
它未定义的原因是,在构造函数中,您收到的是props
,而不是this.props
,
因此,您应该只需要将其更改为以下内容
code:props.match.params.code
谢谢@Chaim,我在class View
上编辑了code:props.match.params.code
,效果很好,你能上帖子吗?