时间戳

首页 > 解决方案 > 在反应组件状态中存储字符串

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

问题描述

我有一个注册组件，它向 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等于一个空字符串（如在状态中声明的那样）。所以接下来我尝试使用具有所需依赖项和钩子的componentDidUpdate等效项，以确保仅在组件更新后（即状态更新后）才显示通知。也没有用。useEffectdidMount 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，因为它是一个相当大的字符串并且需要更多时间？

标签： reactjs

解决方案

这取决于你有什么样的错误以及你从后端得到什么消息。

首先，我建议调试您的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-error的线程。

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

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

推荐阅读