React native, не может обновляться во время существующего перехода состояния

У меня есть родной компонент реакции. Я получил ошибку:

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.info('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
    }
  }
}
`;

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

Кто использует дескриптор Submit?

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

правильный ли этот синтаксис 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), ошибка исчезнет. Это означает, что асинхронное ожидание на самом деле правильное, но мне нужен клиентCreate

Не могли бы вы объяснить, что такое метод customerCreate()?

Vu Luu 04.03.2019 03:54

Метод @vuluu customerCreate взят из CREATE_CUSTOMER_ACCOUNT, который является graphql. Я верю/предполагаю, что customerCreate возвращает обещание. (Я включил это в свой вопрос)

kenpeter 04.03.2019 04:16

@kenpeter все выглядит хорошо. проверьте компонент формы <RegistrationForm>. они могут быть неправильными в этом.

Ponleu 04.03.2019 04:46

@Leu, см. мое обновление выше. Этого достаточно?

kenpeter 04.03.2019 06:05

Можете ли вы удалить строку onSubmit = {async (values) => this.handleSubmit(values, customerCreate)}, посмотрите, работает ли это, просто хочу убедиться, что это ошибка?

Subhendu Kundu 04.03.2019 06:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
5
378
3

Ответы 3

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

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

Я удалил ключевое слово async, у меня все еще та же проблема.

kenpeter 04.03.2019 06:04

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

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

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

kenpeter 05.03.2019 00:00

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

Другие вопросы по теме