【问题标题】:eslint :'isResetProperty' is missing in props validation (react/prop-types)eslint :'isResetProperty' 在 props 验证中丢失(react/prop-types)
【发布时间】:2017-11-15 03:02:14
【问题描述】:

我使用了以下代码,但出现上述 eslint 错误。

componentWillReceiveProps(nextProps) {
        if (nextProps.isResetProperty) {
          this.setState({ empName: defaultEmpName });
          this.setState({ empAddress: defaultEmpAddress });
          this.props.resetPage(false);
        }
      }
  "devDependencies": {
    "eslint": "^3.18.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.3",
}

我该如何解决这个错误:[eslint] 'isResetProperty' is missing in props validation (react/prop-types)。请帮助我。

【问题讨论】:

    标签: reactjs eslint


    【解决方案1】:

    您需要为isResetProperty 属性声明类型。 About PropTypesAbout this rule.

    完整示例

    // index.js
    import { Component } from 'react'
    import PropTypes from 'prop-types'
    
    export default class Cmp extends Component {
      static propTypes = {
        isResetProperty: PropTypes.bool.isRequired,
      }
    
      componentWillReceiveProps(nextProps) {
        if (nextProps.isResetProperty) {
          this.setState({
            reset: nextProps.isResetProperty,
          })
        }
      }
    
      render() {
        return null
      }
    }
    

    package.json

      "scripts": {
        "lint": "eslint ."
      },
      "devDependencies": {
        "babel-eslint": "^7.2.3",
        "eslint": "3",
        "eslint-config-airbnb": "^15.0.1",
        "eslint-plugin-import": "^2.3.0",
        "eslint-plugin-jsx-a11y": "^5.0.3",
        "eslint-plugin-react": "^7.0.1"
      },
      "dependencies": {
        "prop-types": "^15.5.10",
        "react": "^15.5.4"
      }
    

    .eslintrc

    {
      "extends": "airbnb",
      "parser": "babel-eslint",
      "rules": {
        "semi": [2, "never"]
      }
    }
    

    >$ yarn run lint

    纱线运行 v0.24.6 $ eslint 。 1.32 秒内完成。

    【讨论】:

    • 它不会起作用,因为在上面的代码中我们使用的是 nextProps.isResetProperty,如果它像 this.props.isResetProperty 那样使用,您的代码将起作用。
    • @jack123 你真的试过了吗?我不知道你有哪个 eslint 版本。我的作品就像一个魅力。
    • 我正在使用 "eslint": "^3.18.0",
    • 更新到新版本后使用上面的 eslint 错误不会出现,但是 static propTypes = { isResetProperty: PropTypes.bool.isRequired, } 这个不需要在这种情况下定义。新版本会自动解决。
    • @jack123 这有点出乎意料。如果我从类中删除 static propTypes 定义,我会得到“6:19 错误 'isResetProperty' is missing in props validation react/prop-type” 应该是这样。
    【解决方案2】:
    import React from 'react';
    import PropTypes from 'prop-types';
    
    class YourComponentName extends React.Component {
    
      componentWillReceiveProps(nextProps) {
        if (nextProps.isResetProperty) {
          this.setState({ empName: defaultEmpName });
          this.setState({ empAddress: defaultEmpAddress });
          this.props.resetPage(false);
        }
      }
    };
    
    YourComponentName.propTypes = {
      isResetProperty: PropTypes.<type-of-isResetProperty>
    }
    

    【讨论】:

    • 它不会起作用,因为在上面的代码中我们使用的是 nextProps.isResetProperty,如果它像 this.props.isResetProperty 那样使用,您的代码将起作用。
    猜你喜欢
    • 2019-11-22
    • 2020-11-12
    • 2018-09-15
    • 1970-01-01
    • 2020-10-30
    • 2021-07-27
    • 2021-10-15
    • 2015-09-06
    • 2019-06-22
    相关资源
    最近更新 更多