Реагировать на собственный, не может обновить во время существующего перехода состояния

Question

У меня есть реагирующий нативный компонент.Я получил ошибку:

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

Код:

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 является graphql:

import gql from 'graphql-tag';

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

Подробнее здесь

Кто использует handleSubmit?

Есть кнопка в форме , вызывающая handleSubmit, при нажатии.

правильный синтаксис 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>
  );
};

экспорт по умолчанию PrimaryButton;

Обновление 1: Если я удаляюcustomerCreate (исходя из graphql) ошибка исчезает.Это означает, что асинхронное ожидание действительно корректно, но мне нужно customerCreate

Answer 1

Если вы пытаетесь добавить аргументы к обработчику в перекомпоновании, убедитесь, что вы правильно определяете свои аргументы в обработчике.Также может случиться так, что вы случайно вызываете метод onSubmit в вашем методе рендеринга, возможно, вы хотите дважды проверить, как работает ваш onSubmit в компоненте RegistrationForm.Также вы можете попробовать еще одну вещь, перемещая async handleSubmit(values, customerCreate) { в handleSubmit = async(values, customerCreate) =>;Если это не работает, пожалуйста, добавьте также ваш RegistrationForm компонент.

Итог, если вы не устанавливаете состояние в рендере, этого не произойдет.

Answer 2

Оказывается, синтаксис ожидающего асинхронности верен.Полный оригинальный код (не размещен здесь) содержит Toast component react-base.Другой разработчик может сказать мне, чтобы удалить его, и ошибка исчезла.Иногда это трудно отладить.

Answer 3

Вы проверяли следующий код?

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