У меня есть родной компонент реакции. Я получил ошибку:
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
Метод @vuluu customerCreate взят из CREATE_CUSTOMER_ACCOUNT, который является graphql. Я верю/предполагаю, что customerCreate возвращает обещание. (Я включил это в свой вопрос)
@kenpeter все выглядит хорошо. проверьте компонент формы <RegistrationForm>. они могут быть неправильными в этом.
@Leu, см. мое обновление выше. Этого достаточно?
Можете ли вы удалить строку onSubmit = {async (values) => this.handleSubmit(values, customerCreate)}, посмотрите, работает ли это, просто хочу убедиться, что это ошибка?





Вы проверили следующий код?
onSubmit = {(values) => this.handleSubmit(values, customerCreate)}
Я удалил ключевое слово async, у меня все еще та же проблема.
Если вы пытаетесь добавить аргументы в обработчик в recompose, убедитесь, что вы правильно определяете свои аргументы в обработчике.
Также может быть, что вы случайно вызываете метод onSubmit в своем методе рендеринга, вы, вероятно, захотите дважды проверить, как ваш onSubmit в компоненте RegistrationForm.
Также вы можете попробовать еще одну вещь, переместив async handleSubmit(values, customerCreate) { в handleSubmit = async(values, customerCreate) =>;
Если это не сработает, добавьте также свой компонент RegistrationForm.
В итоге, если вы не устанавливаете состояние в рендере, этого не произойдет.
Если я удалю customerCreate (исходящий из graphql), ошибка исчезнет. Это означает, что асинхронное ожидание действительно правильное. Но мне нужен заказчикСоздать
Оказывается, синтаксис асинхронного ожидания правильный. Полный исходный код (не размещенный здесь) содержит Toast component react-base. Другой разработчик может сказать мне удалить его, и ошибка исчезнет. Иногда это трудно отладить.
Не могли бы вы объяснить, что такое метод
customerCreate()?