eslint :'isResetProperty' 在 props 验证中丢失（react/prop-types）答案

【问题标题】：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 PropTypes。 About 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 那样使用，您的代码将起作用。