En mi clase, eslint se queja "Se esperaba que 'esto' fuera usado por el método de clase 'getUrlParams'
Aquí está mi clase:
class PostSearch extends React.Component { constructor(props) { super(props); this.getSearchResults(); } getUrlParams(queryString) { const hashes = queryString.slice(queryString.indexOf('?') + 1).split('&'); const params = {}; hashes.forEach((hash) => { const [key, val] = hash.split('='); params[key] = decodeURIComponent(val); }); return params; } getSearchResults() { const { terms, category } = this.getUrlParams(this.props.location.search); this.props.dispatch(Actions.fetchPostsSearchResults(terms, category)); } render() { return ( <div> <HorizontalLine /> <div className="container"> <Col md={9} xs={12}> <h1 className="aboutHeader">Test</h1> </Col> <Col md={3} xs={12}> <SideBar /> </Col> </div> </div> ); } }¿Cuál es el mejor enfoque para resolver esto o refactorizar este componente?
debe vincular la función a this ya que el error ESLint dice "Expected 'this' to be used by class method 'getUrlParams'
getUrlParams = (queryString) => { .... } como no está utilizando getUrlParams durante el procesamiento (como onClick() ), la técnica anterior es buena y podemos llamarla "uso de la función de flecha en la propiedad de clase".
También hay otras formas de enlazar:
this.getUrlParams=this.getUrlParams.bind(this)onClick={()=>this.getUrlParams()} asumió que la función no tiene parámetros.React.createClass que con ES6 no tiene sentido :)Esta es una regla de ESlint, consulte class-methods-use-this .
Puede extraer el método getUrlParams y ponerlo en un asistente , o hacerlo static .
Lo que también podría hacer es mover this.props.location.search dentro del método, por lo tanto, llamar al método this.getUrlParams() sin parámetro, ya que parece que lo está usando solo una vez.
Por lo tanto, esto podría verse como:
getUrlParams() { const queryString = this.props.location.search; ... return params; }Una última opción sería deshabilitar esta regla ESlint.
getUrlParams = queryString => { ... }