Skip to content

"no-unused-prop-types" inside async functions (include arrow) #1053

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
isnifer opened this issue Jan 31, 2017 · 3 comments
Closed

"no-unused-prop-types" inside async functions (include arrow) #1053

isnifer opened this issue Jan 31, 2017 · 3 comments

Comments

@isnifer
Copy link

isnifer commented Jan 31, 2017

Hi!
I think there is a bug with async functions.
property: "no-unused-prop-types"
parser: "[email protected]"
where: "async functions"
example:

{
  code: [
    'export class Example extends Component {',
    '  static propTypes = {',
    '    failed: PropTypes.func.isRequired,',
    '    loadUserProfile: PropTypes.func.isRequired,',
    '  }',
    '  handleLogin = async () => {',
    '    await this.props.failed();',
    '    await this.props.loadUserProfile();',
    '  };',
    '}'
  ].join('\n'),
  parser: 'babel-eslint'
},
@GGAlanSmithee
Copy link

Some additional info which might help:

this will error:

onSubmit = async (e) => {
    this.setState({loggingIn: true, success: false, message: null})

    const {email, password} = this.state
    const {login, setAuthenticated} = this.props // not detected by eslint

    const {success, message} = await login(email, password)

    this.setState({loggingIn: false, success, message})
    setAuthenticated(success)

    if (success) {
        const {router, location: {state: {nextPathname} = {}}} = this.props

        setTimeout(() => {
            router.push(nextPathname || '/')
        }, 1000)
    }
}

this will not error:

onSubmit = async (e) => {
    this.setState({loggingIn: true, success: false, message: null})

    const {email, password} = this.state
    // properly detected by eslint
    const {login, setAuthenticated, router, location: {state: {nextPathname} = {}}} = this.props

    const {success, message} = await login(email, password)
    this.setState({loggingIn: false, success, message})
    setAuthenticated(success)

    if (success) {
        setTimeout(() => {
            router.push(nextPathname || '/')
        }, 1000)
    }
}

The only difference between these snippets is how this.props is destructured. In the first example, location and router props are destructured separately, and in the second example all props are accessed together. This is probably not the whole solution, since @isnifer isn't destructuring at all. But mabe you can try and see if this works;

{
  code: [
    'export class Example extends Component {',
    '  static propTypes = {',
    '    failed: PropTypes.func.isRequired,',
    '    loadUserProfile: PropTypes.func.isRequired,',
    '  }',
    '  handleLogin = async () => {',
    '    const {failed, loadUserProfile} = this.props;',
    '    await failed();',
    '    await loadUserProfile();',
    '  };',
    '}'
  ].join('\n'),
  parser: 'babel-eslint'
},

@TrevorSayre
Copy link

TrevorSayre commented Jun 1, 2017

export default class Users extends Component {

  static propTypes = {
    ...
    onLoad: PropTypes.func.isRequired,
  };

  async componentWillMount() {
    await Promise.all([
      this.props.onLoad(),
      this.onSearch(),
    ]);
    ...
  }

  ...

}

'onLoad' PropType is defined but prop is never used (react/no-unused-prop-types)

@Wildhoney
Copy link

@TrevorSayre similar for me — using [email protected].

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

5 participants