第 31:7 行：React Hook useEffect 缺少依賴項：'url'。 包括它還是刪除依賴數組？

Question

我在我的 React 應用程序中遇到了一個小問題，它在終端中給了我這個警告， Line 31:7: React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array. Line 31:7: React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array. 我覺得這與我選擇使用useEffect. 但我不確定無論何時我輸入表格控制台都會繼續顯示 object 有人知道我該如何解決這個問題。

零件

import React, {useEffect, useState} from 'react'
import axios from 'axios'

const SingleHouse = () => {

    const house_id = window.location.href.split('/')[4]

    // console.log('HOUSE ID: ', house_id);
    //GET HOUSE OBJECT, USESTATE
    const url = `http://localhost:5000/api/house-details/${house_id}`
    const [mounted, setMounted] = useState(true)
    const [house, setHouse] = useState('')


    //HANDLE EMAIL FORM, USESTATE
    const [email, setEmail] = useState('');
    const[subject, setSubject] = useState('');
    const [message, setMessage] = useState('')


    useEffect(()=>{
        const loadData = async () => {
            const {data} = await axios.get(url);

            if(mounted) {
                setHouse(data)
            }
        }
        loadData()
        return()=>[setMounted(false)]
    },[mounted]);

    console.log(house)

    const sendMessage = (e) => {
        e.preventdefault();

        console.log('Email', email);
        console.log('Subject', subject);
        console.log('message', message)
    }
    
    return (
        <div className="HosueDescription__container">
           {house && ( <div className="HouseDescription__leftContainer">
             
                <img src={house.house_details.house_image} alt=""/>
                <h3>{`$${house.house_details.price.toLocaleString(navigator.language, { minimumFractionDigits: 0 })}`}</h3>
                <h3>{`${house.house_details.numOfBeds} Bedroom house in ${house.house_location.city} for ${house.house_details.isSaleOrRent}.`}</h3>
                <div className="number_container">
                    <h5> Bedrooms: {house.house_details.numOfBeds}</h5>
                    <h5> Bathrooms: {house.house_details.numOfBaths}</h5>
                    <h5> Garages: {house.house_details.numOfGarages}</h5>

                    <h4>2423 Duck Creek Road</h4>

                    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi fugiat autem cumque voluptas? Ratione error reprehenderit delectus odio quos iure soluta adipisci fugit, dolores amet neque! Quaerat ipsum laborum consectetur rem voluptas, ullam quisquam aut eligendi nesciunt culpa ad totam, corporis a! Velit consequatur molestias dolor corrupti iure sequi id expedita repellendus impedit neque. Impedit cupiditate laboriosam commodi aperiam nobis odio sunt, error adipisci atque ex minima nisi dignissimos unde! Quod est laudantium, neque dolor atque itaque. Est, dignissimos eum.</h4>


                </div>
         </div> )}
            <div className="HouseForm">
                <form className="Form" onSubmit={sendMessage} >
                    <label>Email</label>
                    <input type="email" onChange={(e)=>setEmail(e.target.value)} placeholder="Enter a valid email"/>
                    <label >Subject</label>
                    <input type="text" onChange={(e)=>setSubject(e.target.value)} placeholder="Enter a Subject"/>
                    <label >Message</label>
                    <textarea  cols="30" rows="10" onChange={(e)=>setMessage(e.target.value)} placeholder="Enter a message"></textarea>
                    <button>Send</button>
                </form>
            </div>
           
        </div>
    )
}

export default SingleHouse

后端路由

// const express= require('express')

// const router = express.Router()
const router = require('express').Router();

const {House} = require('../../Models/House');



//HOUSE Fetch


router.get('/api/house-sale', async(req, res)=>{

    try{
        House.find({'house_details.isSaleOrRent': 'SALE'}).exec().then((data)=>{
            console.log(data);
            return res.status(200).json(data)
        })
    } catch(error) {
        return res.status(500).json({msg: 'server is currently Down :('})
    }
   
})


router.get('/api/house-rent', async(req, res)=>{

    try{
        House.find({'house_details.isSaleOrRent': 'RENT'}).exec().then((data)=>{
            return res.status(200).json(data)
        })
    } catch(error) {
        return res.status(500).json({msg: 'server is currently Down :('})
    }
   
})


router.get('/api/house-details/:id', async(req, res)=>{

    await House.findOne({_id:req.params.id}).exec().then(data=>{

        return res.status(200).json(data)
    }).catch(error =>{
        return res.status(400).json(error)
    })
})


module.exports = router;

Answer 1

更新useEffect的依賴數組。 React 期望useEffect中使用的所有變量/函數必須是依賴項，以便useEffect對該依賴項中的更新采取行動。

useEffect(()=>{
  const loadData = async () => {
     const {data} = await axios.get(url);

     ...
}, [mounted, url]);

如果特定變量/函數未在useEffect之外使用，您可以在useEffect的主體內聲明。

Answer 2

嘗試將此行放入 useEffect 中：

    useEffect(()=>{
         const url = `http://localhost:5000/api/house-details/${house_id}`