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