CODEWITHSUNDEEP
reactjsflowtype
dagda1
dagda1

Reputation: 28910

function call. Function cannot be called on possibly undefined value

I have the following react component

//@flow

import React from 'react';
import { connect } from 'react-redux';
import { submit } from 'redux-form';
import { Button } from 'ds-component-library';
import styles from './ApplicationLayout.scss';
import cs from 'classnames';

const RemoteSubmitButton = ({
  dispatch,
  form
}: {
  dispatch: void,
  form: string
}) =>
  <Button
    primary
    className={cs(styles['button-next'])}
    onClick={() => dispatch(submit(form))}
  >
    Next
  </Button>;

RemoteSubmitButton.displayName = 'RemoteSubmit';

export default connect()(RemoteSubmitButton);

I get the following error when running flow:

onClick={() => dispatch(submit(form))}
                        ^^^^^^^^^^^^^^^^^^^^^^ function call. Function cannot be called on possibly undefined value
onClick={() => dispatch(submit(form))}
                        ^^^^^^^^ undefined

Upvotes: 1

Views: 594

Answers (2)

Dan Homola
Dan Homola

Reputation: 4575

If I understand the error message correctly, the problem might be that calling submit(form) might return undefined and that would cause a problem, because the dispatch function expects to be called wit one non-undefined argument.

Either submit's annotations are wrong, or you need to check its return value before passing it to dispatch.

Upvotes: 0

Jibolash
Jibolash

Reputation: 658

The interpreter is not happy with the fact that you defined dispatch's type to be void when destructuring, it assumes it could possibly be undefined, but yet, you are always calling the function when the button is clicked.

A possible solution might be to extract the dispatch call to a function and check if dispatch is not undefined first.

Upvotes: 1

Related Questions