警告：React Hook useEffect 缺少依赖项：'postImage'。 在 npm 运行构建时包含它或删除依赖数组

Question

在我的项目中，每当我运行 npm 运行构建命令时，都会通过警告消息警告：React Hook useEffect 缺少依赖项：'postImage'。 包括它或删除依赖数组。 react-hooks/exhaustive-deps 。 如何解决这个问题。 提前致谢。 这是我收到此消息的完整代码。

import Image from 'next/image';
import {useRef} from 'react';
import { useSession } from "next-auth/client";
import {ChatAltIcon,ThumbUpIcon,ShareIcon} from "@heroicons/react/outline";
import{LoveIcon,SadEmojiIcon} from "@heroicons/react/solid";
import InsertEmotionIcon from "@material-ui/icons/InsertEmoticon"
import SentimentVeryDissatisfiedIcon  from "@material-ui/icons/SentimentVeryDissatisfied";
import FavoriteIcon from  "@material-ui/icons/Favorite";
import MoodIcon  from "@material-ui/icons/Mood";
import MoodBadIcon  from "@material-ui/icons/MoodBad";
import firebase  from 'firebase';
import { db, storage } from "../firebases";
import {useEffect,useState} from 'react';
import {useCollection} from "react-firebase-hooks/firestore";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
const Post=({id,name,message,email,timestamp,postImage})=>{
    const commentRef=useRef(null);
    const [isShown, setIsShown] = useState(false);
    const [session]=useSession();
    const[totalImage,setTotalImage]=useState(null);
    const[load,setLoaded]=useState(false);
    const likePost= async(e)=>{
        let min =1;
        let max = 50;
        let postId = e.target.getAttribute("id");
        console.log(postId)
        let userId = (Math.floor(Math.random()*(max-min+1))+min);
        let reaction = e.target.getAttribute("data-reaction");
        let item = {postId,userId,reaction};
        console.log(reaction);
        let send = await fetch("http://localhost:8000/api/backend",{
            method:'post',
            body:JSON.stringify(item),
            headers:{
                "Content-Type":'application/json',
                "Accept":'application/json'
            },
        }).then(response=>{
            console.log(response)
        })
    }
    const[user,loading,error] = useCollection(
        db.collection("users").orderBy("joined_at","desc")
        );
    const submitComment=async(e)=>{
        if (!commentRef.current.value) return;
        else
            {
                console.log("comment")
            }
            
        }
        const handleEvent=(e)=>{
            if(e.detail==2){
                setIsShown(true)
            }
            else{
                setIsShown(false)
            }
        }
        useEffect(()=>{
            const remainingImage=totalImage > 6 ? totalImage-6:0;

        },[remainingImage])
        return (
            <div className="flex flex-col">
            <div className="p-5 bg-white mt-5 router-t-2xl shadow-sm">
            <div className="flex items-center space-x-2">
            <div>
            <p className="font-medium">{name}</p>
            {
                timestamp? <p className="text-xs text-gray-40">{timestamp}</p> :(
                    <p  className="text-xs text-gray-40">Loading...</p>
                    )
            }

            </div>
            </div>
            <p className="pt-4">{message}</p>
            </div>

            <div className="relative  h-56 bg-white"> 
            {/* <div className="grid-cols-3 p-20 space-y-2  lg:space-y-0 lg:grid lg:gap-3 lg:grid-rows-3"> */}
            <Carousel>
            {
                useEffect(()=>{
                    postImage?.map((ele)=>{
                        return ele.map((urls)=>{
                            setTotalImage(urls.url.length);
                                return urls.url.map((url_,index)=>{
                                return   <div key={index} className="w-full rounded"><Image src={url_} layout="fill" objectFit="cover"alt="image"/></div>
                            })  
                        })
                    })
                
                },[session])
                
            }
            {/* </div> */}
            </Carousel>
            </div>
            {
                isShown &&(
                    <div className="flex justify-start items-center bg-white" >
                    <div className=" items-center   px-1 p-2 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
                    <FavoriteIcon  onClick={()=>setIsShown(false)}className="text-red hover:text-red-500"style={{color:"red"}}></FavoriteIcon>
                    </div>
                    <div className=" items-center   p-2 px-1 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
                    <InsertEmotionIcon  onClick={()=>setIsShown(false)}className="text-yellow hover:text-yellow-500" style={{color:"yellow"}}></InsertEmotionIcon>
                    </div>
                    <div className=" items-center   p-2 px-1 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
                    <SentimentVeryDissatisfiedIcon onClick={()=>setIsShown(false)}  className="text-yellow hover:text-yellow-500"style={{color:"yellow"}}></SentimentVeryDissatisfiedIcon>
                    </div>
                    <div className="items-center  p-2 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
                    <MoodIcon onClick={()=>setIsShown(false)} className="text-yellow hover:text-yellow-500" style={{color:"yellow"}}></MoodIcon>
                    </div>
                    <div className=" items-center   px-1   -1 p-2 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
                    <MoodBadIcon  onClick={()=>setIsShown(false)} className="text-yellow hover:text-yellow-500"style={{color:"yellow"}}></MoodBadIcon>
                    </div>
                    </div>
                    )
            }
            <div className="flex justify-between items-center  bg-white shadow-md text-gray-700 border-t mt-5">
            <div onDoubleClick={handleEvent} className="flex items-center hover:bg-gray-100 flex-grow justify-content p-2 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
            <ThumbUpIcon className="text-lg sm:text-base  h-5 corsor-pointer"onClick={likePost}  id={id} data-reaction="like" ></ThumbUpIcon>
            <span className="cursor-pointer text-2xl  text-gray-700">1223</span>
            </div>
            <div  className="flex items-center hover:bg-gray-100 flex-grow justify-content p-2 rounded-xl corsor-pointer rounded-none">
            <ChatAltIcon className="text-lg sm:text-base h-5  corsor-pointer"></ChatAltIcon>
            <span  className="cursor-pointer text-2xl  text-gray-700">7777</span>
            </div>
            <div  className="flex items-center hover:bg-gray-100 flex-grow justify-content p-2 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
            <ShareIcon className="text-lg sm:text-base h-5 corsor-pointer"></ShareIcon>
            <span className="cursor-pointer text-2xl  text-gray-700">312</span>
            </div>
            </div>
            <div className="flex space-x-4 p-4 py-1 items-center bg-white ">
            {session ? <><Image src={session.user.image} height={40} width={40} layout="fixed"className="rounded-full"alt="image"/> </>:null
        }
        <form className="flex flex-1">
        <input className="rounded-full h-12 bg-gray-100 flex-grow px-5 focus:outline-none" ref={commentRef} type="text"placeholder="Comment..."/>
        <button hidden type="submit"onClick={submitComment}></button>
        </form>
        </div>
        <div className="rounded-b-2xl bg-white flex text-gray-40 pb-2 pl-4 ">
        <small className="mx-auto">Press enter to submit  your comment.</small>
        </div>
        </div>
        )
}
export default Post;

Answer 1

你可以：

1. 在导致错误的行顶部使用 // eslint-disable-next-line react-hooks/exhaustive-deps
2. 在.eslintrc.json中禁用此 eslint 规则
3. 只需在 useEffect 依赖数组（ [session, postImage] ）中包含缺少的变量