反应原生，在现有状态转换期间无法更新答案

【问题标题】：React native, cannot update during an existing state transition反应原生，在现有状态转换期间无法更新
【发布时间】：2019-03-05 10:51:16
【问题描述】：

我有一个反应原生组件。我得到了错误：

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
    }
  }
}
`;

More detail here

谁在使用 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

【问题讨论】：

你能解释一下customerCreate()方法是什么吗？
@vuluu customerCreate 方法来自 CREATE_CUSTOMER_ACCOUNT，即 graphql。我相信/猜测客户创造回报的承诺。（我已将其包含在我的问题中）
@kenpeter 一切看起来都很好。请检查表单组件。他们可能有问题。
@Leu，请参阅上面的更新。够了吗？
你能删除onSubmit={async (values) => this.handleSubmit(values, customerCreate)} 行，看看是否可行，只是想确认一下，这是错误吗？

标签： reactjs react-native async-await graphql graphql-mutation

【解决方案1】：

您检查过以下代码吗？

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

【讨论】：

我删除了 async 关键字，我仍然有同样的问题。

【解决方案2】：

如果您尝试在 recompose 中向处理程序添加参数，请确保您在处理程序中正确定义了参数。也可能是您不小心在渲染方法中调用了 onSubmit 方法，您可能需要仔细检查您的 onSubmit 在 RegistrationForm 组件中的方式。此外，您可能还想尝试另一件事，将async handleSubmit(values, customerCreate) { 移动到handleSubmit = async(values, customerCreate) =>；如果这不起作用，请添加您的 RegistrationForm 组件。

底线，除非你没有在渲染中设置状态，否则这不会发生。

【讨论】：

如果我删除 customerCreate（来自 graphql），错误就会消失。这意味着异步等待实际上是正确的。但我需要customerCreate

【解决方案3】：

事实证明异步等待语法是正确的。完整的原始代码（此处未发布）包含Toast component react-base。其他开发人员能够告诉我删除它并且错误消失了。有时很难调试。

【讨论】：