I tried it from last 2 days but can not getting the solution. I tried many times please help me out.If any one knows please help me thanks in advance Trying to fetch the details of room while clicking on Book Now button but Getting error:src\screen\Bookingscreen.js Line 21:8: React Hook useEffect has a missing dependency: 'match.params.roomid'. Either include it or remove the dependency array Here is my code :
````Bookingscreen.js
import React, { useState, useEffect } from 'react'
import axios from "axios"
function Bookingscreen({ match }) {
const [loading, setloading] = useState(true);
const [error, setError] = useState();
const [room, setroom] = useState();
useEffect(() => {
async function postData() {
try {
setloading(true);
const data = (await axios.post('/api/rooms/getroombyid', { roomid: match.params.roomid })).data; // Here I got the Error
setroom(data);
setloading(false);
} catch (error) {
console.log(error)
setloading(false);
setError(true);
}
}; postData();
}, []);
return (
<div className='m-5'>
{loading ? (<h1>loading...</h1>) : error ? (<h1>Error...</h1>) : (<div>
<div className='row justif-content-center mt-5 bs'>
<div className='col-md-6'>
<h1>{room.name}</h1>
<img src={room.imageurls[0]} className='bigimg' />
</div>
<div style={{ float: "right" }}>
<div className='col-md-6'>
<b>
<h1>Bookin Details</h1>
<hr />
<p>Name:</p>
<p>From Date :</p>
<p>To Date :</p>
<p>Max Count : {room.maxcount}</p>
</b>
</div>
<div style={{ float: "right" }}>
<b>
<h1>Amount</h1>
<hr />
<p>Total days: </p>
<p>Rent per day: {room.rentperday}</p>
<p>Total Amount</p>
</b>
</div>
<div style={{ float: "right" }}>
<button className='btn btn-primary'>Pay Now</button>
</div>
</div>
</div>
</div>)}
</div>
)
}
export default Bookingscreen;
````App.js file:
From App.js I used the Route for fetch roomid:
import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import HomeScreen from './screen/HomeScreen';
import Bookingscreen from './screen/Bookingscreen';
function App() {
return (
<div className="App">
<Router>
<Navbar />
<Routes>
<Route exact path="/" element={<HomeScreen />} />
<Route path="/book/:roomid" element={<Bookingscreen />} />
</Routes>
</Router>
</div>
);
}
export default App;
````Room.js file:
import React, { useState } from 'react'
import { Modal, Button, Carousel } from 'react-bootstrap'
import { Link } from 'react-router-dom'
function Room({ room }) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<div className='row bs'>
<div className='col-md-4'>
<img src={room.imageurls[0]} alt='' className='smallimg' />
</div>
<div className='col-md-7'>
<h1>{room.name}</h1>
<b>
{" "}
<p>Max Count: {room.maxcount}</p>
<p>Phone Number: {room.phonenumber}</p>
<p>Type: {room.type}</p>
</b>
<div style={{ float: 'right' }}>
<Link to={`/book/${room._id}`}>
<button className='btn btn-primary m-2'>Book Now</button>
</Link>
<button className='btn btn-primary' onClick={handleShow}>View Details</button>
</div>
</div>
<Modal show={show} onHide={handleClose} size='lg'>
<Modal.Header>
<Modal.Title>{room.name}</Modal.Title>
</Modal.Header>
<Modal.Body>
<Carousel>
{room.imageurls.map(url => {
return <Carousel.Item>
<img
className="d-block w-100 bigimg"
src={url}
alt="room-images"
/>
</Carousel.Item>
})}
</Carousel>
{room.description}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</div>
)
}
export default Room
````roomsRoute.js file:
const express=require('express');
const router=express.Router();
const Room=require("../models/roomModel");
//book a room
router.post("/getroombyid", async(req,res)=>{
try {
const room=await Room.findOne({_id:req.params.roomid})
res.send("Successful");
} catch (error) {
return res.status(400).json({message:"error"});
}
});
module.exports=router;
CodePudding user response：
Inside Bookingscreen you are using the useEffect hook which has an optional second property which should contain a list of dependencies which the function "watches" for changes. If you want it to run once like didComponentMount then remove the second parameter (i.e. remove []), otherwise add dependencies.
Edit: Either of these will get rid of the error:
function Bookingscreen({ match }) {
// ...
useEffect(() => {
// ...
})
// OR
useEffect(() => {
// ...
}, [match.params.roomid])
CodePudding user response：
This is an ESLint (eslint-plugin-react-hooks) warning . that tell you your useEffect is depends on 'match.params.roomid'
to prevent this warning just add it as a dependency array in your useEffect like this :
useEffect(() => {
async function postData() {
try {
setloading(true);
const data = (await axios.post('/api/rooms/getroombyid', { roomid: match.params.roomid })).data; // Here I got the Error
setroom(data);
setloading(false);
} catch (error) {
console.log(error)
setloading(false);
setError(true);
}
}; postData();
}, [match.params.roomid]);
or disable Eslint's warning :
useEffect(() => {
your code here ...
}, []) // eslint-disable-line react-hooks/exhaustive-deps