这是什么错误，为什么 null 不是正确的选择？

问题描述

当我使用 null 时，我不断收到错误，根据我在 React 中设置的模式（使用 VSC）所遵循的教程给了我这个：

TypeError: setSelectedImage is not a function
handleClick
src/components/modal.js:8
   5 | const handleClick = (e) => {
   6 |     if(e.target.classList.contains('backdrop'))
   7 |     {
>  8 |         setSelectedImage(null);
     | ^   9 |     }
  10 |     
  11 |     

我的 Modal.js 文件是：

import React from 'react';

const Modal = ({ selectedImage,setSelectedImage}) => {

    const handleClick = (e) => {
        if(e.target.classList.contains('backdrop'))
        {
            setSelectedImage(null);
        }
        
        
    };

    return (
        <div className="backdrop" onClick={handleClick}>
            <img src={selectedImage} alt="enlarged pic" />
        </div>
    )
}

export default Modal;

在哪里使用：

import Gridgallery from "./components/grid-gallery";
import React,{useState} from 'react';
import Modal from './components/modal';
import './components/modal.css';
import "./index.css";

export default function gallery()
{
    const [selectedImage,setSelectedImage] = useState(null);
    const images = 
    [
        '../images/SplashPgConc.png',"../images/Wolf.png","../images/SplashPgConc.png","../images/Wolf.png"
    ];
    return (
        <div className="items-center">
            <Gridgallery images={images} setSelectedImage={setSelectedImage} />
             {selectedImage && <Modal selectedImage={selectedImage} setSelectedImage={setSelectedImage}/> }
        </div>

    );
}

和 Grid gallery 了解更多上下文：

import { useState } from "react";
import VisibilitySensor from 'react-visibility-sensor';


export default function Gridgallery({images,setSelectedImage}){
    const [imagesShownArray,setimagesShownArray] = useState(
        Array(images.length).fill(false)
    );

    const imageVisibleChange = (index,isVisible) => {
        if(isVisible){
            setimagesShownArray((currentimagesShownArray) =>{
                currentimagesShownArray[index] = true;
                return [...currentimagesShownArray];
            });
        }
    };


    return(
        <div className= "grid grid-cols-3 gap-2">
            {images && images.map((imageUrl,index)=> (
                <VisibilitySensor
                key={index}
                partialVisibility={true}
                offset={{ bottom: 80 }}
                onChange={(isVisible) => imageVisibleChange(index,isVisible)}
              >
                <GridgalleryCard
                  imageUrl={imageUrl}
                  show={imagesShownArray[index]}
                  setSelectedImage={setSelectedImage}
                />
              </VisibilitySensor>
            ))}
        </div>
    );

};
        
function GridgalleryCard({ imageUrl,show,setSelectedImage}) 
{
    return (
                <div className={`relative transition ease-in duration-300 transform ${
                    show ? "" : "translate-y-16 opacity-0"
                }`} onClick={() => setSelectedImage(imageUrl)}>

                    <div className="absolute inset-0 z-10 flex transition duration-200 ease-in hover:opacity-0">
                        <div className="absolute inset-0 bg-black opacity-70"></div>
                        <div className="mx-auto text-white z-10 self-center uppercase tracking-widest text-sm">
                            Hello World
                        </div>
                    </div>
                    <img src ={imageUrl} />
                </div>
       
    );
}

我非常困惑为什么将 null 与 setSelectedImage 一起使用会引发错误，有人能澄清这一点以及我做错了什么吗？这一切都正常，直到我点击图片，然后它会抛出错误而不是关闭模态。我真的为自己能走到这一步而感到自豪。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）