在反应组件状态中存储字符串

Question

我有一个注册组件，它向 API 发送 POST 请求，如果注册成功，只需向用户显示通知并重定向到登录页面（现在）。如果不是，则服务器发回状态 400 和一条消息。当我收到响应时，我将状态变量 serverError 设置为 true，并将 serverMessage 设置为我从服务器收到的任何内容，以将其显示给用户。

POST 请求逻辑：

export const registerRequest = (state, setState) => {
  axios.post("api/auth/register", {
   "email": state.email, "password": state.password, "firstName": state.firstName, "lastName": state.lastName
    }).then((response) => {
        if (response.status === 200) {
            setState({
                ...state,
                serverError: false
            });
        }
    }).catch((exception) => {
        setState({
            ...state,
            serverMessage: exception.response.data,
            serverError: true,
        });
    });
}

首先，我尝试在处理表单提交的函数中执行此“向用户显示出了什么问题”，但我不断收到serverError === true 但serverMessage 等于一个空字符串（如在状态中声明的那样）。因此，接下来我尝试在 useEffect 中使用具有所需依赖项的 componentDidUpdate 等效项和 didMount useRef 挂钩，以确保仅在组件更新后（即状态更新后）才显示通知。也没用。

useEffect 和 handleSubmit 钩子/函数（useHistory 来自 react-router-dom 和 Notification 是一个带有标题和描述的 antD 组件）：

const { serverError, serverMessage } = state;
const didMountRef = useRef(false);

useEffect(() => {
    if (didMountRef.current) {
        if (serverError) {
            StyleImports.Notification["success"]({
                message: [JsonImports.registerNotificationSuccess],
                description: [JsonImports.registerSuccessDetails]
            });
            setTimeout(() => { history.push("/"); }, 4.5 * 1000);
        }
        else {
            StyleImports.Notification["error"]({
                message: [JsonImports.registerNotificationFail],
                description: serverMessage
            });
        }
    }
    else didMountRef.current = true;
    
}, [serverError, serverMessage, history]);


const handleSubmit = (event) => {
    // just some form validation logic before form submission
    event.preventDefault();
    registerRequest(state, setState);
    // commented just to show you what I did initially
    /*if (state.serverError) {
        StyleImports.Notification["success"]({
            message: [JsonImports.registerNotificationSuccess],
            description: [JsonImports.registerSuccessDetails]
        });
        setTimeout(() => { history.push("/"); }, 4.5 * 1000);
    }
    else {
        StyleImports.Notification["error"]({
            message: [JsonImports.registerNotificationFail],
            description: state.serverMessage
        });
    }*/
}

有关如何正确处理此问题的任何想法？在我看来，仅显示在 JSON 客户端中声明的一些消息并不是一个好主意，因为我可以从服务器获取不同的消息。我猜setState 实际上并没有更新serverMessage，因为它是一个相当大的字符串并且需要更多时间？

Answer 1

这取决于您遇到的错误类型以及您从后端收到的消息。

首先我建议调试您的exception 属性并查看可用的数据。只需在setState({ 行设置断点或在此行之前添加console.log(error)。请检查您的 exception 中的内容。

在此之后，您可以处理不同的错误情况，例如：

...
.catch(function (error) {
    if (error.response) {
      // Request made and server responded
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }

或者这可能适合您的数据？这完全取决于您的错误中的内容

  .catch(error => {
     console.log(error.response.data.error)
  })

也请查看axios-handling-errors 线程。

顺便说一句，这看起来像一个错误？ serverError 可能没有成功 ;-)

if (serverError) {
            StyleImports.Notification["success"]({