缺少道具驗證（道具類型）

Question

我正在嘗試將下面的代碼從一個項目轉移到另一個具有.eslintrc和.prettier規則的項目（CoreUI）。 無論如何，這樣做（傳輸代碼）會給我帶來一些我不知道如何解決的錯誤。 請幫忙。

注意：我發現了這個問題，但我不知道如何使用該解決方案來解決此問題。

---

錯誤：

  Line 13:11:  'notify' is missing in props validation          react/prop-types
  Line 13:19:  'setNotify' is missing in props validation       react/prop-types
  Line 26:20:  'notify.isOpen' is missing in props validation   react/prop-types
  Line 31:31:  'notify.type' is missing in props validation     react/prop-types
  Line 32:17:  'notify.message' is missing in props validation  react/prop-types

編碼：

import { Snackbar } from '@mui/material'
import React from 'react'
import { Alert } from '@material-ui/lab'
import { makeStyles } from '@material-ui/core'

const useStyles = makeStyles((theme) => ({
  root: {
    top: theme.spacing(8),
  },
}))

export default function Notification(props) {
  const { notify, setNotify } = props
  const classes = useStyles()

  const handleClose = (event, reason) => {
    setNotify({
      ...notify,
      isOpen: false,
    })
  }

  return (
    <Snackbar
      className={classes.root}
      open={notify.isOpen}
      autoHideDuration={3000}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      onClose={handleClose}
    >
      <Alert severity={notify.type} onClose={handleClose}>
        {notify.message}
      </Alert>
    </Snackbar>
  )
}

.eslintrc.js 代碼：

module.exports = {
  // parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  extends: [
    'react-app',
    'react-app/jest',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['react', 'react-hooks'],
  rules: {  },
}

Answer 1

在您的 .eslintrc 文件中，添加一條規則以禁用道具類型驗證

rules: { "react/prop-types": 0 }

或者為您的組件添加道具類型驗證

import PropTypes from 'prop-types';

//...
Notification.propTypes = {
    notify: PropTypes.shape({
        message: PropTypes.string,
        type: PropTypes.string,
        isOpen: PropTypes.bool
    }),
    setNotify: PropTypes.func
};