React Native Formik handleSubmit 不从函数中读取 return 值

Question

美好的一天！

我今天使用 formik 有一个奇怪的经历，我目前正在开发一个使用 formik 处理表单的应用程序，并将在 formik 的 onSubmit() 函数内执行 API 请求。

除了我使用 API 请求并等待它的回调之外，一切都很顺利。 onSubmit 函数中的内容会以某种方式正常工作，但 API 回调值不会 return 除非我在应用程序本身中执行 UI 更改（例如按屏幕上的随机点以触发 ui 变化）。

这是我的 formik 的 onSubmit 函数的样子

onSubmit={values => {
                      console.log("before")
                      let response = FunctionWithApiRequest(values);
                      console.log("after")
                      response.then((res) => {
                         console.log(res)
                      })
          }}

这是我的函数，里面有 api 请求

const FunctionWithApiRequest = (credentials) => {
    return fetch(`${AppConfig.HOSTNAME}/v2/auth/signup`, {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(credentials)
    })
    .then((response) => response.json())
    .then((responseJson) => {
        return responseJson
    })
    .catch((error) => {
        console.log(error)
    });
}

return "responseJson" 只会在我执行 UI 更改时出现在 onsubmit 函数中（比如在我的反应本机屏幕中单击随机点）

我想知道问题是什么以及导致错误的原因。

提前感谢您的回复。

Answer 1

也许你可以在一个单独的函数中使用 await 和 async.For instance

async handleSubmit(){
let {credentials} = this.state
let data = await this.props.FunctionWithApiRequest(credentials)
this.setState({returnedData: data})
}

现在在你的 textInput/formik

onSubmit={()=>this.handleSubmit()}

我假设你已经在 actions.file 中发出请求 api 函数，而不是在同一个 file.Am 中，我对吗？所以我所做的只是在 [=22 之前等待=] 表示只有当你有响应时才会执行下一行 returned.Comment 如果你有任何问题。

Answer 2

当您启用挖掘模式时，这是由运输捆绑器引起的。

React Native Formik handleSubmit 不从函数中读取 return 值

React Native Formik handleSubmit does not read return values from function

reactjs

react-native

formik