Javascript 通过解构功能组件接收propsprop验证中缺少错误"

我已经在这方面工作了大约两天，我将继续努力，但我想可能是时候得到一些指导了，同时我也会继续努力.这是我的第一个Reaction项目，我有点困惑.我一直在网上学习课程，我一直在学习我的导师关于通过使用函数组件解构来接收props 的例子，我一次又一次地跟踪并重写，但我总是收到错误"在props 验证中缺失".我正在使用ESLint.

我真的很喜欢编程，我不是学得最快的人，但我想知道我做错了什么.

教师的代码示例根本没有使用.props，所以我很困惑.我知道有不同的方式来接受props ，所以我特别困惑于通过解构来接受props .感谢您的指导.我参考了这些文章以及许多堆栈溢出问题:

https://www.npmjs.com/package/prop-types. https://legacy.reactjs.org/docs/components-and-props.html. 一百零二 https://dev.to/colocodes/react-class-components-vs-function-components-23m6

import PageNav from "../components/PageNav";
import "./Work.module.css";

const galleryData = [
    {
        name: "Pixel Art 1",
        description: "Blah blah blah",
        openModal: false,
    },
    {
        name: "Pixel Art 2",
        description: "Blah blah bla",
        openModal: false,
    },
    {
        name: "Pixel Art 3",
        description: "Blah bah blah",
        openModal: false,
    },
];

export default function PixelArt() {
    return (
        <main className="workPageGrid">
            <PageNav />
            <div className="galleryList">
                <GalleryList />
            </div>
        </main>
    );
}

function GalleryList() {
    const galleries = galleryData;
    console.log(galleries);

    const numGallery = galleries.length;
    console.log(numGallery);

    return (
        <main className="galleryList">
            <h2>wtf</h2>

            {numGallery > 0 ? (
                <ul className="galleries">
                    {galleries.map((gallery) => (
                        <Gallery galleryObj={gallery} key={gallery.name} />
                    ))}
                </ul>
            ) : (
                <p>fml :)</p>
            )}
        </main>
    );
}

function Gallery({ galleryObj }) {
    console.log(galleryObj);

    if (galleryObj.openModal) return null;

    return (
        <li className={`gallery ${galleryObj.openModal ? "open-modal" : ""}`}>
            {" "}
            <div>
                <h2>{galleryObj.name}</h2>
                <p>{galleryObj.description}</p>
            </div>
        </li>
    );
}

具体地说，EsLint引发的错误是:

galleryObj
galleryObj.openModal
galleryObj.name
galleryObj.description
are missing in props validation eslint(react/prop-types)