Javascript 如何在React中使用道具来操作参数?

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,

我是新开发人员,我开发了一个关于数据库的表,前端是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, 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);
    });

}
r
outer.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));
    }
当我用Postman
http://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
    ,效果很好,你能上帖子吗?