I am new developer ReactJS, I develop a table with ReactJS on the FrontEnd, NodeJS on BackEnd and MySQL about the database.
I want when I click on the view button on Action column, it will be redirected to another page, which display a list containing the result of the Select query, as below :
ViewCLient.js :
class ViewClient extends Component {
constructor(props) {
super(props);
this.state = {
clients: [],
Code :1111
};
this.toggle = this.toggle.bind(this);
this.state = {
activeTab: '1',
};
}
toggle(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab,
});
}
}
ponentDidMount(Code) {
axios({
method: "get",
url: "/app/viewclient/"+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;
// 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;
ListClient.js
class ListeClients extends Component {
constructor(props) {
super(props);
this.state = {
clients: []
};
this.handleView = this.handleView.bind(this);
this.handleEdit = this.handleEdit.bind(this);
}
ponentDidMount() {
axios({
method: "get",
url: "/app/listeclients/",
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));
}
/*handleViewB(Code) {
this.props.history.push('/clients/viewclient/');
}*/
handleView( evt) {
try {
console.log("Voir client")
this.props.history.push('/clients/viewclient/');
// Do something that could throw
}
catch (error) {
this.setState({ error });
}
}
handleEdit(event) {
try {
console.log("Modifier client")
this.props.history.push('/clients/editclient/');
// Do something that could throw
} catch (error) {
this.setState({ error });
}
}
// event.preventDefault;
render() {
let { clients } = this.state;
let Code = this.state;
var btn = {
backgroundColor: 'Transparent',
backgroundRepeat: 'no-repeat',
border: 'none',
cursor: 'pointer',
overflow: 'hidden',
outline: 'none'
}
var center = {
textAlign: "center"
}
return (
<div className="animated fadeIn">
<Card style={{ height:"420px"}}>
<CardHeader>
<h4>
<strong>
<i className="fa fa-align-justify" /> Tous les clients
</strong>
</h4>
</CardHeader>
<CardBody>
<Table bordered responsive size="sm" style={center}>
<thead >
<tr>
<th ><strong>Code</strong></th>
<th>Prenom</th>
<th>Nom</th>
<th>Email</th>
<th>Telephone</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{
clients.map(client => (
<tr key={client.Code}>
<td>{client.Code} </td>
<td>{client.Prenom}</td>
<td>{client.Nom}</td>
<td>{client.Email}</td>
<td>{client.Telephone}</td>
<td>
<button style={btn} onClick={this.handleView} type="button"><i class="fa fa-eye"></i></button>
<button style={btn} onClick={this.handleEdit} type="button"><i class="fa fa-edit"></i></button>
<button style={btn}><i class="fa fa-trash-o"></i></button>
</td>
</tr>
))}
</tbody>
</Table>
</CardBody>
</Card>
</div>
);
}
}
export default ListeClients;
My router.js :
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);
});
}
My server.js :
router.get('/viewclient/:Code', clients.viewclient);
When I run the backend, it works well with Postman, but when I run it with ReactJS, it redirects me to http://localhost:3000/app/viewclient/ but nothing is displayed and the console of the router console.log(req.params) returns { Code: 'undefined' }
How to fix that please ?
I am new developer ReactJS, I develop a table with ReactJS on the FrontEnd, NodeJS on BackEnd and MySQL about the database.
I want when I click on the view button on Action column, it will be redirected to another page, which display a list containing the result of the Select query, as below :
ViewCLient.js :
class ViewClient extends Component {
constructor(props) {
super(props);
this.state = {
clients: [],
Code :1111
};
this.toggle = this.toggle.bind(this);
this.state = {
activeTab: '1',
};
}
toggle(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab,
});
}
}
ponentDidMount(Code) {
axios({
method: "get",
url: "/app/viewclient/"+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;
// 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;
ListClient.js
class ListeClients extends Component {
constructor(props) {
super(props);
this.state = {
clients: []
};
this.handleView = this.handleView.bind(this);
this.handleEdit = this.handleEdit.bind(this);
}
ponentDidMount() {
axios({
method: "get",
url: "/app/listeclients/",
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));
}
/*handleViewB(Code) {
this.props.history.push('/clients/viewclient/');
}*/
handleView( evt) {
try {
console.log("Voir client")
this.props.history.push('/clients/viewclient/');
// Do something that could throw
}
catch (error) {
this.setState({ error });
}
}
handleEdit(event) {
try {
console.log("Modifier client")
this.props.history.push('/clients/editclient/');
// Do something that could throw
} catch (error) {
this.setState({ error });
}
}
// event.preventDefault;
render() {
let { clients } = this.state;
let Code = this.state;
var btn = {
backgroundColor: 'Transparent',
backgroundRepeat: 'no-repeat',
border: 'none',
cursor: 'pointer',
overflow: 'hidden',
outline: 'none'
}
var center = {
textAlign: "center"
}
return (
<div className="animated fadeIn">
<Card style={{ height:"420px"}}>
<CardHeader>
<h4>
<strong>
<i className="fa fa-align-justify" /> Tous les clients
</strong>
</h4>
</CardHeader>
<CardBody>
<Table bordered responsive size="sm" style={center}>
<thead >
<tr>
<th ><strong>Code</strong></th>
<th>Prenom</th>
<th>Nom</th>
<th>Email</th>
<th>Telephone</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{
clients.map(client => (
<tr key={client.Code}>
<td>{client.Code} </td>
<td>{client.Prenom}</td>
<td>{client.Nom}</td>
<td>{client.Email}</td>
<td>{client.Telephone}</td>
<td>
<button style={btn} onClick={this.handleView} type="button"><i class="fa fa-eye"></i></button>
<button style={btn} onClick={this.handleEdit} type="button"><i class="fa fa-edit"></i></button>
<button style={btn}><i class="fa fa-trash-o"></i></button>
</td>
</tr>
))}
</tbody>
</Table>
</CardBody>
</Card>
</div>
);
}
}
export default ListeClients;
My router.js :
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);
});
}
My server.js :
router.get('/viewclient/:Code', clients.viewclient);
When I run the backend, it works well with Postman, but when I run it with ReactJS, it redirects me to http://localhost:3000/app/viewclient/ but nothing is displayed and the console of the router console.log(req.params) returns { Code: 'undefined' }
How to fix that please ?
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Jul 16, 2018 at 15:51 Ichrak MansourIchrak Mansour 1,94212 gold badges37 silver badges64 bronze badges 6-
Your React ponent fetch from '/app/viewclient/' which resolves to
http://localhost:300/app/viewclient/. You need to pass the full url to axios. – Christophe Commented Jul 16, 2018 at 15:59 - Which url, it must be passed ? – Ichrak Mansour Commented Jul 16, 2018 at 17:02
- check the answer of @madhu-bhat – Christophe Commented Jul 16, 2018 at 18:33
-
@Christophe the issue is about the url used on the frontend, that on axios on
ViewClients.jsor onhandleViewonListeClients.js– Ichrak Mansour Commented Jul 16, 2018 at 19:05 -
Have you tried replacing
url: "/app/viewclient/"+Codewithurl: "http://localhost:4000/app/viewclient/"? – Christophe Commented Jul 16, 2018 at 20:17
1 Answer
Reset to default 4The react app by default tries to connect to the url on port 3000. So you would either need to provide the full url with port number on which the server is running (the url which you tried on Postman) to axios, or modify the scripts attribute of package.json to include the server port number.
Also, there the way of implementing ponentDidMount in ViewClient.js is incorrect. In ponentDidMount(Code), Code will be undefined. If the value of Code will be constant, you can access the value within ponentDidMount using the state. So change the same to below:
ponentDidMount() {
axios({
method: "get",
url: "/app/viewclient/"+this.state.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));
}