react/no-unused-prop-types no working when use `{...this.state}`

Metriche repository

Star

8630 star (8630 star)

Metriche merge PR

Nessuna PR mergiata in 30 g (Nessuna PR mergiata in 30 g)

Descrizione

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  static propTypes = {
    bar: PropTypes.string.isRequired,
  };

  state = {
    style: { color: 'red' },
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          // when I add `{...this.state}`, the rule is no working
          <h1 className="App-title" {...this.state} >Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

{
  "extends": "react-app",
  "rules": {
    "react/no-unused-prop-types": [
      "error",
      {
        "customValidators": [],
        "skipShapeProps": true
      }
    ]
  }
}

Guida contributor

Direzione di ricerca

Indaga perché la regola 'react/no unused prop types' non riesce a segnalare prop non utilizzate quando si usa `{...this.state}` in JSX. Esamina l'implementazione della regola per rilevare l'uso delle prop, in particolare come gestisce gli attributi spread. Controlla la logica di attraversamento AST per vedere se le espressioni spread che fanno riferimento allo stato vengono ignorate. Prendi in considerazione l'aggiornamento della regola per trattare gli spread dallo stato come potenziale uso delle prop, o aggiungere un'opzione per ignorare tali casi. Controlla i test esistenti per pattern di spread simili e aggiungi un test fallimentare per questo caso.

Tech stack

javascriptreact

Dominio

frontendtooling

Tipo issue

Bug

DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.

2

Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.

1-3 ore

Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.

Attiva

ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.

Chiara

Prerequisiti

JavaScriptReactESLint

Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.

75