React Hook useEffect 缺少依赖项：“match.params.roomid”。 包含它或删除依赖项数组

Question

我从最近 2 天开始尝试，但无法获得解决方案。 我尝试了很多次，请帮助我。如果有人知道请帮助我，提前致谢尝试在单击“立即预订”按钮时获取房间的详细信息，但出现错误：src\screen\Bookingscreen.js 第 21:8 行：React Hook useEffect 缺少依赖项：“match.params.roomid”。 包括它或删除依赖项数组这是我的代码：

````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;

Answer 1

在Bookingscreen中，您正在使用useEffect挂钩，它有一个可选的第二个属性，该属性应包含一个依赖项列表，function“监视”更改。 如果你想让它像didComponentMount一样运行一次那么去掉第二个参数（即去掉[]），否则添加依赖。

编辑：其中任何一个都会消除错误：

function Bookingscreen({ match }) {
   // ...
   useEffect(() => {
     // ...
   })
   // OR
   useEffect(() => {
     // ...
   }, [match.params.roomid])

Answer 2

这是一个ESLint （eslint-plugin-react-hooks）警告。 告诉你你的useEffect取决于'match.params.roomid'

要防止此警告，只需将其作为依赖项数组添加到您的useEffect中，如下所示：

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]);

或禁用Eslint 的警告：

  useEffect(() => {
  your code here ...
}, []) // eslint-disable-line react-hooks/exhaustive-deps