0

I am new developer ReactJS, I develop a table with ReactJS on the FrontEnd, NodeJS on BackEnd and MySQL about the database. I want to get a data with Select request by Code (Primary key ) on the list. enter image description here

As you see above, I want, when I click on the view button, it will be directed me to the list page, which the row is retrieved.

My ViewClients :

class ViewClient extends Component {

    constructor(props) {
        super(props);


        this.state = {
            clients: []
        };

        this.toggle = this.toggle.bind(this);
        this.state = {
            activeTab: '1',
        };
    }

    toggle(tab) {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab,
            });
        }
    }
    componentDidMount() {
        var Code = this.props.Code;
        axios({
                method: "get",
                url: "/app/viewclient/?Code="+Code+",
                withCredentials: true,
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    "Content-Type": "application/json",
                    Accept: "application/json"
                }
            })
            .then(response => {
                if (response && response.data) {
                    this.setState({ clients: response.data });
                }
            })
            .catch(error => console.log(error));
    }


    render() {
        let { clients } = this.state;
        return (
            <div className="animated fadeIn">
        <Row>
         
           <Col xs="12" md="6" className="mb-4">
            <Nav tabs>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '1' })}
                  onClick={() => { this.toggle('1'); }}
                >
                  <i className="fa fa-info"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Détails</span>
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '2' })}
                  onClick={() => { this.toggle('2'); }}
                >
                  <i className="fa fa-credit-card"></i> <span
                  className={this.state.activeTab === '2' ? '' : 'd-none'}> Factures</span>
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '3' })}
                  onClick={() => { this.toggle('3'); }}
                >
                  <i className="fa fa-truck"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Bons de livraison</span>
                </NavLink>
              </NavItem>
            </Nav>
            <TabContent activeTab={this.state.activeTab} style={{ height:"420px"}}>
              <TabPane tabId="1">
               <ul>
               {
                       clients &&  clients.map(client => (
                            <li key={client.Code}>
                         <h1> Code client :    {client.Code} </h1>
                             {client.Prenom}
                              {client.Nom}
                              {client.FAX}
                             {client.Telephone}
                               {client.Email}
                                {client.Adresse1}
                                 {client.Adresse2}
               </li>
               ))}
               </ul>
              </TabPane>
              <TabPane tabId="2">
                
              </TabPane>
              <TabPane tabId="3">
              
              </TabPane>
            </TabContent>
          </Col>
          
        </Row>
      </div>
        );
    }
}

export default ViewClient;

My router is :

    exports.viewclient = function(req, res) {
        var Code = req.params.Code;
console.log(Code);
        connection.query("SELECT Code, Prenom, Nom, FAX, Telephone, Email, Adresse1, Adresse2  FROM clients WHERE Code =?',[Code],  function(error, results, fields) {
            if (error) throw error;
            res.send(JSON.stringify(results));
    console.log(results);
        });
    
    }

My server is :

router.get('/viewclient/:Code?', clients.viewclient);

When I run it, I get on my console backend [] and on my frontend, nothing is showing because the row is not retrieved. How to fix that please ?

1 Answer 1

1

The Error is ,A Get Method Doesnot contains a body params.Body params is only available in a POST request.Try using query params because you are sending the code as ?Code=.

In the backend,Get the code by using req.query.Code instead of using req.body.Code

Sign up to request clarification or add additional context in comments.

9 Comments

I change it on my router like : var Code = req.query.Code; connection.query("SELECT Code, Prenom, Nom, FAX, Telephone, Email, Adresse1, Adresse2 FROM clients WHERE Code ='"+Code+"'", function(error, results, fields) { and on my server : router.get('/viewclient/:Code?', clients.viewclient); and on my frontend : var Code = this.state.Code; axios({ method: "get", url: "/app/viewclient/:Code?"+Code, But nothing is showing on the frontend, it's still `[]' on my backend log.
your url is wrong,it should be like /app/viewclient?Code=
It 's still the same issue, SELECT Code, Prenom, Nom, FAX, Telephone, Email, Adresse1, Adresse2 FROM clients WHERE Code =' "+Code+" ' " can be an issue on my Select query ?
can you console and see whether you are getting the code on server,if code comes means ! it is a problem with your mysql query
I try to run : connection.query('SELECT Code, Prenom, Nom, FAX, Telephone, Email, Adresse1, Adresse2 FROM clients WHERE Code = "1111" ', function(error, results, fields) { with Postman, it works well, but the issue is when I put Code in WHERE Clause ..
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.