AXIOS Post 在我的 REACT 应用程序中保持 PENDING

Question

Below is the Redux Action code that will be dispatched whenever onSubmit of Create / Updating a profile:

我正在使用 AXIOS 库对后端进行以下 POST 调用 - MongoDB.

const res = await axios.post(
      '/api/profile',
      formData,                 // Body
      config                    // Headers
    );

在我的 React 应用程序中，上述代码行对于 Create 工作正常，但对于 Update，它没有返回任何内容在 Chrome Dev Tools 的 Networks 选项卡中，状态为 Pending。有人可以帮助我了解我在哪里犯了错误吗？

Both the Create/Update calls worked fine when I did the POST request using Postman with the same Headers and Payload data.

完整代码如下：

// Create/Update Profile
export const createProfile = (formData, history, edit = false) => async (
  dispatch
) => {
  try {
    const config = {
      headers: {
        'Content-Type': 'application/json',
      },
    };
    debugger;
    const res = await axios.post(
      '/api/profile',
      formData,
      config
    );
    dispatch({
      type: GET_PROFILE,
      payload: res.data,
    });

    dispatch(setAlert(edit ? 'Profile Updated' : 'Profile Created'), 'success');

    if (!edit) {
      history.push('/dashboard');
    }
  } catch (error) {
    const errors = error.response.data.errors;
    if (errors) {
      errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
    }

    dispatch({
      type: PROFILE_ERROR,
      payload: {
        msg: error.response.statusText,
        status: error.response.status,
      },
    });
  }
};

Answer 1

您的数据发送方式有问题

您在 headers 中选择了 content-type: application/json，而您正在以字符串形式发送数据。

解决方案：

如果您的 formData 变量是 class FormData 的实例，则将您的 headers content-type 更改为 x-www-form-urlencoded。

如果您的 formData 是一个简单的 object，那么请不要在 axios.post 方法中使用 JSON.stringify。

同时更新您的 axios 请求：

const res = await axios.post(
      'http://localhost:5000/api/profile',
      formData,
      config
    );

希望对你有帮助

Answer 2

哦，我的坏蛋！

我在 API 端点上遇到了一些问题，我正在检查 if(formData.Skills) 并且错误地在 之后的错误位置关闭了 花括号 catch 块，因此状态为 Pending，因为没有返回任何数据。

对不起，伙计们！

谢谢大家的解决方案，它也帮助了我。祝你有美好的一天！

AXIOS Post 在我的 REACT 应用程序中保持 PENDING

AXIOS Post stay on PENDING in my REACT application

reactjs

react-native

react-redux

redux-form