问题

以下是您要翻译的内容：

"我有一个注册表单，提交后，只有在操作文件中的请求成功时，我才想导航到其他屏幕，而不是在组件本身。

我将navigation作为参数从我的组件传递给函数，但导航没有发生。

对于这个问题有任何建议吗？

// Action.js
export const registerUser = (formData, navigation) => async dispatch => {
  try {
    const response = await axios.post(`${config.END_POINT}/users`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })

    await AsyncStorage.setItem('token', response.data.token)

    dispatch({ type: 'auth/setToken' })

    loadUser(navigation)
  } catch (error) {
    console.error(error.message)
  }
}

export const loadUser = (navigation) => async dispatch => {
  try {
    const response = await axios.get(`${config.END_POINT}/auth`)

    dispatch({
      type: 'auth/setUser',
      payload: response.data
    })

    navigation.navigate('Home')
  } catch (error) {
    console.error(error.message)
  }
}

在component.js中填写表单后

dispatch(registerUser(formData, navigation))
```"

<details>
<summary>英文:</summary>

I have a registration form that after submission of which I want to navigate to other screen only if the request succeeds in the action file not in Component itself.

I&#39;m sending `navigation` as an argument to the function from my component but the navigation is not happening.

Any suggestions about this issue?

```javascript
// Action.js
export const registerUser = (formData, navigation) =&gt; async dispatch =&gt; {
  try {
    const response = await axios.post(`${config.END_POINT}/users`, formData, {
      headers: {
        &#39;Content-Type&#39;: &#39;multipart/form-data&#39;
      }
    })

    await AsyncStorage.setItem(&#39;token&#39;, response.data.token)

    dispatch({ type: &#39;auth/setToken&#39; })

    loadUser(navigation)
  } catch (error) {
    console.error(error.message)
  }
}

export const loadUser = (navigation) => async dispatch => {
  try {
    const response = await axios.get(`${config.END_POINT}/auth`)

    dispatch({
      type: 'auth/setUser',
      payload: response.data
    })

    navigation.navigate('Home')
  } catch (error) {
    console.error(error.message)
  }
}

In component.js after filling form

dispatch(registerUser(formData, navigation))

答案1

得分: 1

loadUser 似乎是另一个异步操作创建函数。loadUser 是一个接受 navigation 参数并返回另一个函数的函数，为了执行该函数体并生效导航操作，还需要调用返回的函数。registerUser 动作调用了 loadUser(navigation)，但然后没有调用返回的函数。

换句话说，loadUser(navigation) 返回以下内容：

async dispatch => {
  try {
    const response = await axios.get(`${config.END_POINT}/auth`);

    dispatch({
      type: 'auth/setUser',
      payload: response.data
    });

    navigation.navigate('Home');
  } catch (error) {
    console.error(error.message);
  }
};

这个函数从未被调用。

你应该分发这个 loadUser 动作，以便 thunk/异步中间件可以调用该函数，并再次将 dispatch 传递给它。

示例：

export const registerUser = (formData, navigation) => async dispatch => {
  try {
    const response = await axios.post(
      `${config.END_POINT}/users`,
      formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    );

    await AsyncStorage.setItem('token', response.data.token);

    dispatch({ type: 'auth/setToken' });

    dispatch(loadUser(navigation)); // <-- 分发动作！
  } catch (error) {
    console.error(error.message);
  }
};

async dispatch => {
  try {
    const response = await axios.get(`${config.END_POINT}/auth`);

    dispatch({
      type: 'auth/setUser',
      payload: response.data
    });

    navigation.navigate('Home');
  } catch (error) {
    console.error(error.message);
  }
};

export const registerUser = (formData, navigation) => async dispatch => {
  try {
    const response = await axios.post(
      `${config.END_POINT}/users`,
      formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    );

    await AsyncStorage.setItem('token', response.data.token);

    dispatch({ type: 'auth/setToken' });

    dispatch(loadUser(navigation)); // <-- dispatch action!
  } catch (error) {
    console.error(error.message);
  }
};

答案2

得分: 0

你正在在成功注册后，从registerUser操作中调用loadUser函数。然而，loadUser函数是异步的，意味着它不会立即返回一个值。因此，在loadUser之后的导航调用不会等待loadUser函数完成后再进行导航。

为了确保导航仅在loadUser成功完成后发生，你可以修改registerUser操作，使其返回一个在loadUser完成时解析的promise。以下是如何修改registerUser操作：

export const registerUser = (formData, navigation) => async dispatch => {
  try {
    const response = await axios.post(`${config.END_POINT}/users`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })

    await AsyncStorage.setItem('token', response.data.token)

    dispatch({ type: 'auth/setToken' })

    await dispatch(loadUser(navigation)) // 等待loadUser完成

  } catch (error) {
    console.error(error.message)
  }
}

通过等待对loadUser的调用，导航仅会在loadUser成功完成后发生。还要确保从loadUser函数中返回loadUser调用，以便可以在registerUser操作中等待。

export const loadUser = (navigation) => async dispatch => {
  try {
    const response = await axios.get(`${config.END_POINT}/auth`)

    dispatch({
      type: 'auth/setUser',
      payload: response.data
    })

    navigation.navigate('Home')

    return true // 返回一个值以指示成功

  } catch (error) {
    console.error(error.message)

    return false // 返回一个值以指示失败
  }
}

通过这些更改，registerUser操作现在应该返回一个promise，在loadUser函数完成时解析，并且导航仅在loadUser函数成功完成后发生。

export const registerUser = (formData, navigation) => async dispatch => {
  try {
    const response = await axios.post(`${config.END_POINT}/users`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })

    await AsyncStorage.setItem('token', response.data.token)

    dispatch({ type: 'auth/setToken' })

    await dispatch(loadUser(navigation)) // Wait for loadUser to complete

  } catch (error) {
    console.error(error.message)
  }
}

export const loadUser = (navigation) => async dispatch => {
  try {
    const response = await axios.get(`${config.END_POINT}/auth`)

    dispatch({
      type: 'auth/setUser',
      payload: response.data
    })

    navigation.navigate('Home')

    return true // Return a value to indicate success

  } catch (error) {
    console.error(error.message)

    return false // Return a value to indicate failure
  }
}