ESlint жалуется, что this.props.handleSubmit отсутствует при проверке проп

Question

У меня есть компонент с именем SiteTechnologyForm

class SiteTechnologyForm extends React.Component {

  static propTypes = {
    name: PropTypes.string,
    site_technology_id_number: PropTypes.string,
    common_site: PropTypes.string,
    title: PropTypes.string,
    errors: PropTypes.string
  }

  constructor(props) {
    super(props);

    this.state = {
      logged_in: localStorage.getItem('token') ? true : false,
      name: props.name || '',
      site_technology_id_number: props.site_technology_id_number || '',
      common_site: props.common_site || '',
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  UNSAFE_componentWillMount() {
    if (!this.state.logged_in) {
      browserHistory.push("/accounts/login");
    }
  }

  handleChange(event) {
    if (event.target && event.target.name){
      this.setState({[event.target.name]: event.target.value});
    }
  }

  handleSubmit() {
    let payload = {
      "common_site": this.state.common_site,
      "name": this.state.name,
      "site_technology_id_number": this.state.site_technology_id_number
    };
    this.props.handleSubmit(payload)
  }

  render() {
    const {
      title,
      errors
    } = this.props;

    return !this.state.logged_in ? '' :
      <BaseForm title={title} handleSubmit={this.handleSubmit} errors={errors} data={this.state}>
        <CommonSiteAutocomplete
          label="CommonSite *"
          id="id_common_site"
          required={true}
          inputProps={{
            name: "common_site",
            onChange: this.handleChange,
            value: this.state.common_site,
            required: true
          }}
        />
        <CustomInput
          labelText="Name *"
          id="id_name"
          formControlProps={{
            fullWidth: true
          }}
          inputProps={{
            type: "text",
            onChange: this.handleChange,
            name: "name",
            value: this.state.name,
            required: true
          }}
        />
        <CustomInput
          labelText="Site Technology ID *"
          id="id_site_technology_id_number"
          formControlProps={{
            fullWidth: true
          }}
          inputProps={{
            type: "text",
            onChange: this.handleChange,
            name: "site_technology_id_number",
            value: this.state.site_technology_id_number,
            required: true
          }}
        />
      </BaseForm>
  }
}

И ESlint жалуется на отсутствие handleSubmit в проверке реквизита.

И SiteTechnologyForm используется в других компонентах, таких как AddSiteTechnologyниже:

class AddSiteTechnology extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      errors: ''
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(data) {

    fetch(siteTechUrl, {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Token ${localStorage.getItem('token')}`
      },
      method: 'POST',
      body: JSON.stringify(data),
    })
      .then(response => {
        if (response.status >= 400) {
          return this.setState({errors: response.statusText});
        }
        browserHistory.push("/site_technologies/list");
      })
  }

  render() {
    return <SiteTechnologyForm title="Add Site Technology" handleSubmit={this.handleSubmit} errors={this.state.errors}/>
  }
}

Я изначально пытался использовать

handleSubmit: PropTypes.function

Но когда я пытаюсь запустить веб-страницу, я получаю эту ошибку в консоли

checkPropTypes.js: 19 Предупреждение: сбойный тип опоры: SiteTechnologyForm: недопустимый тип опоры handleSubmit;это должна быть функция, обычно из пакета prop-types, но полученная undefined.

Как мне разрешить эту ситуацию с помощью handleSubmit, не прошедшего проверку?

Answer 1

Вы не определили тип handleSubmit в своем списке объявлений propTypes, eslint не удалось найти handleSubmit.

Определите handleSubmit как function тип, подобный этому, иЯ считаю, что это всегда требуется, поэтому добавьте также isRequired.

static propTypes = {
  name: PropTypes.string,
  site_technology_id_number: PropTypes.string,
  common_site: PropTypes.string,
  title: PropTypes.string,
  errors: PropTypes.string,
  handleSubmit: PropTypes.func.isRequired
}

Узнайте больше о Проверка типов с PropTypes

Answer 2

В соответствии с ESLINT вам также потребуется указать типы реквизита для реквизита handleSubmit.Тип функции обрабатывается func, а не function:

handleSubmit: PropTypes.func