切换屏幕后如何消除表单错误？答案

【问题标题】：How to remove form errors after switching screens?切换屏幕后如何消除表单错误？
【发布时间】：2021-07-24 05:55:16
【问题描述】：

我正在处理一个联系表单，当提交一个空表单时，服务器会发送一个带有 error: "invalidData" 的响应，并且我在 Redux Store 中存储了一条错误消息以便稍后显示它：

if (responseJSON.message == "invalidData") {
    dispatch(renderError("Invalid Data!"));
}

然后我将它提取到组件中：

const mapStateToProps = (state) => ({
  formError: state.cForm.error,
});

最终在提交表单后在联系屏幕中显示错误：

{formError && (
   <Text style={{ color: "#f00", textAlign: "left", alignSelf: "stretch" }}>
     {formError}
   </Text>
)}

错误显示没有问题，但是当我离开当前联系人屏幕并导航到其他屏幕时，如果我返回联系人屏幕，错误仍然存在。我该如何解决这个问题？或者只显示错误 30 秒，然后将其删除。

提前感谢您的帮助。

【问题讨论】：

【解决方案1】：

我认为您可以在卸载或安装组件时清空 redux 存储（实际上没有区别）。

所以你必须做一个动作来清空 redux 中的 formError。例如dispatch(removeError("")) 并且在 componentWillUnmount 或 componentDidMount （甚至功能组件中的 useEffect ）中，您必须按如下方式调用它：

componentWillUnmount() {
  dispatch(removeError(""))
}

【讨论】：