React native, cannot update during an existing state transition

Question

I have a react native component. I got the error:

Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

Code:

import....

class Register extends Component {
  static navigationOptions = {
    header: null,
  };

  async handleSubmit(values, customerCreate) {
    const { email, password, firstName, lastName, phone } = values;
    const input = { email, password, firstName, lastName, phone };
    const customerCreateRes = await customerCreate({ variables: { input } });
    const isCustomerCreated = !!customerCreateRes.data.customerCreate.customer.id;
    if (isCustomerCreated) {
      const isStoredCrediential = await storeCredential(email, password);
      if (isStoredCrediential === true) {
        // Store in redux
        // Go to another screen
        console.log('test');
      }
    }
  }

  render() {
    return (
      <Mutation mutation={CREATE_CUSTOMER_ACCOUNT}>
        {
            (customerCreate, { error, data }) => {

              return (
                <MainLayout
                  title="Create Account"
                  backButton
                  currentTab="profile"
                  navigation={this.props.navigation}
                >
                  { showError }
                  { showSuccess }
                  <RegistrationForm
                    onSubmit={async (values) => this.handleSubmit(values, customerCreate)}
                    initialValues={this.props.initialValues}
                  />
                </MainLayout>
              );
            }
          }
      </Mutation>

    );
  }
}

const mapStateToProps = (state) => {
  return {
    ....
  };
};

export default connect(mapStateToProps)(Register);

CREATE_CUSTOMER_ACCOUNT is graphql:

import gql from 'graphql-tag';

export const CREATE_CUSTOMER_ACCOUNT = gql`
mutation customerCreate($input: CustomerCreateInput!) {
  customerCreate(input: $input) {
    userErrors {
      field
      message
    }
    customer {
      id
    }
  }
}
`;

More detail here

Who is using the handleSubmit?

There is a button in the form call the handleSubmit, when press.

is this syntax correct onPress={handleSubmit} ?

const PrimaryButton = ({ label, handleSubmit, disabled }) => {
  let buttonStyle = styles.button;
  if (!disabled) {
    buttonStyle = { ...buttonStyle, ...styles.primaryButton };
  }

  return (
    <Button block primary={!disabled} disabled={disabled} onPress={handleSubmit} style={buttonStyle}>
      <Text style={styles.buttonText}>{label}</Text>
    </Button>
  );
};

export default PrimaryButton;

Update 1: If I remove customerCreate (coming from graphql), the error disappears. It means the async await is actually correct, but I need the customerCreate

Answer 1

Did you check with following code ?

onSubmit={(values) => this.handleSubmit(values, customerCreate)}

Answer 2

If you are trying to add arguments to a handler in recompose, make sure that you're defining your arguments correctly in the handler. Also can be you're accidentally calling the onSubmit method in your render method, you probably want to double check how your onSubmit in RegistrationForm component. Also you might want to try one more thing, moving async handleSubmit(values, customerCreate) { to handleSubmit = async(values, customerCreate) =>; If this doesn't work, please add up your RegistrationForm component as well.

Bottom line, unless your aren't setting state in render, this will not happen.

Answer 3

It turns out the async await syntax is correct. The full original code (not posted here) contains Toast component react-base. The other developer is able to tell me to remove it and the error is gone. Sometimes it is hard to debug.